在jQuery中使用AJAX-图书管理的请求和传送

为什么要在jQuery中使用AJAX呢？不用想，肯定是因为浏览器中提供的XMLHttpRequest用法较为复杂，所以jQuery对“小黄人”进行的封装，提供了一系列的AJAX相关的函数，降低了我们使用AJAX的难度，我们今天正式来学习jQuery中发起AJAX请求最常用的三个方法：

$.get()            => 从服务器获取数据

$.post()          => 向服务器上传数据

$.ajax()           => 可以获取数据/上传数据

目录

一.$.get()

二.使用$.get()方法发起带参数和不带参数请求的区别

1.发起不带参数请求：

2.发起带参数请求：

三.$post()

四.$.ajax()

---

 

---

一.$.get()

语法：$.get(url,[date],[callback])

url是一个String类型的请求资源的地址 【必选参数】

date是一个object类型的对象参数，请求资源时携带的参数（比如我们获取哪个资源，上传哪个资源等都需要在date里填写相对应参数）【可选参数】

callback是一个function类型的回调函数，当我们请求成功是，就执行调用这个函数里的方法

---

 

二.使用$.get()方法发起带参数和不带参数请求的区别

1.发起不带参数请求：

直接提供URL地址和请求成功之后的回调函数：

$(function(){
        //给按钮绑定点击事件，点击之后，发起GET请求
        $("button").on("click",function(){
            $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                //res是服务器返回的数据
                console.log(res);
            })
        })
    })

 我们F12进入网络查看我们获取到的数据：

 我们初学AJAX的提交或者获取大部分人都在这个URL地址上练习，所以下面就多出来了一些奇怪的对话，我们不需要在意（我获取到的信息好像只有这老哥是四川的【狗头】），我们再来看一下这个“标头”的数据：

 我们知道了请求的方法是GET方法、URL显示以及状态、地址等信息

2.发起带参数请求：

$(function(){
        $("button").on("click",function(){
            $.get('http://www.liulongbin.top:3006/api/getbooks',{id: 1},function(res){
                console.log(res);
            })
        })
    })

我们带了一个对象参数，为id:1，这是什么意思呢？

意思就是我要获取id值为1的那条数据：

 这样的话，我们就只获得了一条id等于1的数据

---

 

三.$post()

jQuery中的POST函数的功能单一，只是用来发起post请求的

语法：$post(url,[date],[callback])

这三个参数都和GET函数的一样，只有date的理解不一致，GET函数的date描述的是要获取数据的特征，POST函数的date描述的是要上传的数据的完整信息

我们用代码实践一下：

$(function(){
        $("button").on("click",function(){
            $.post('http://www.liulongbin.top:3006/api/addbook',{   //请求URL地址
                bookname : '网页设计实战',author : 'giao',publisher : 'giaogiao图书出版社'  //提交数据
            },function(res){                                        //回调函数
                console.log(res);
            })
        })
    })

 显示图书添加成功，但是我不满足，我就要看到我的图书，那我们可以用带参数GET请求一下数据：

$(function(){
        $("button").on("click",function(){
            $.get('http://www.liulongbin.top:3006/api/getbooks',{bookname : '网页设计实战'},function(res){
                console.log(res);
            })
        })
    })

然后如愿以偿的得到了我们刚才存进去的图书 

 

---

四.$.ajax()

相比于$.get()和$.post()，jQuery中提供了较为综合的$.ajax()函数，可以进行更加详细的配置：

语法：$.ajax({

                type:'',                //请求的方式（GET/POST）

                url:'',                        //请求的URL地址

                date:{},                //请求携带的数据

                success:function(res){}                //请求成功之后执行的回调函数

})

我们使用代码来实现一下：

$(function(){
        $("button").on("click",function(){
            $.ajax({
                type :'GET',
                url :'http://www.liulongbin.top:3006/api/getbooks',
                date :{
                    id :1
                },
                success : function(res){
                    console.log(res);
                }
            })
        })
    })

 这样就可以获得到id值为1的图书数据了：

 我们也惊喜的发现，我们之前发送的数据，也在下面显示出来了：

 

我们基础就讲到这里，学习前端，关注小蜗