为什么要在jQuery中使用AJAX呢?不用想,肯定是因为浏览器中提供的XMLHttpRequest用法较为复杂,所以jQuery对“小黄人”进行的封装,提供了一系列的AJAX相关的函数,降低了我们使用AJAX的难度,我们今天正式来学习jQuery中发起AJAX请求最常用的三个方法:
$.get() => 从服务器获取数据
$.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的图书数据了:
我们也惊喜的发现,我们之前发送的数据,也在下面显示出来了:
我们基础就讲到这里,学习前端,关注小蜗