用jQuery发送ajax请求

一、get()

$.get() 通过远程 HTTP GET 请求载入信息。

1. 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，使用 $.ajax。
2. $.get() 和 $.post() 也可以传入对象数据。查看案例3

$.get(url,[data],[callback],[type])

• url : 请求的URL地址，String类型
• data：要发送的key/value数据，Map类型
• callback: 请求成功后的回调函数，Function类型
• type：返回的内容格式，xml, html, script, json, text, _default。String类型

案例1：请求text.php,并传送两个参数

$.get("text.php",{name:aa,password:123456})

案例2：请求text.php,并传送两个参数，使用回调函数接收请求回来的数据

$.get("text.php",{name:aa,password:123456},function(data){
	//回调函数的形参data就是请求成功后返回来的数据
	console.log(data);
})

案例3：传入对象参数

$.get({
	url:"text.php",
	data:{name:aa},
	callback:function(data){
		console.log(data)
	}
})

二、post()

$.post() 通过远程 HTTP POST 请求载入信息。

• 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，使用 $.ajax。

$.post(url,[data],[callback],[type])

• url : 请求的URL地址，String类型
• data：要发送的key/value数据，Map类型
• callback: 请求成功后的回调函数，Function类型
• type：返回的内容格式，xml, html, script, json, text, _default。String类型

三、ajax()

ajax() 用来发送一个综合的ajax请求

语法： $.ajax(对象)
对象中是本次ajax的请求配置信息

• url: “” //请求地址，必填
• type： “GET/POST/PUT/DELETE” //请求方式，默认是get
• data: {} //请求体数据
• headers:{} //添加请求头信息
• dataType: “json/jsonp” //服务器返回数据类型
• async: true //是否异步
• success：function(){} //成功的回调函数
• error：function(){} //失败的回调函数
• timeout: 数值 //单位是毫秒，超时时间
• cach: true //是否缓存，默认是true
• context： 上下文 //改变回调函数中this的指向
• …

案例：用ajax()发送一个post请求

$.ajax({
	url:"text.php",
	type:"post",
	data:{name:aa},
	dataType:"json",
	success:function(){
		console.log(data)
	},
	error:function(){
		console.log("请求失败")
	}
})

发送jsonp请求配置参数

• dataType:“jsonp” //使用jsonp必须写dataType: “jsonp”
• jsonp："" //后端定义接收回调函数名的字段名
• cache: false //jsonp的请求缓存默认是false

案例：用ajax()发送一个jsonp请求

$.ajax({
	type:"get",
	url:"text.php",
	data:{name:"123"},
	dataType:"jsonp",
	jsonp:"cb",
	success:function(data){
		console.log(data)
	}
})

四、ajax全局钩子函数

1、ajaxStart()

ajax事件，ajax请求开始时执行

同一作用域下有多个ajax请求时，第一个ajax请求之前触发，且只触发一次

语法：ajaxStart(callback)

• callback 触发时执行的回调函数

2、ajaxSend()

ajax事件，ajax请求发送之前执行该函数

每一个ajax发送之前都会触发一次（xhr.send()之前触发）

XMLHttpRequest对象和设置作为参数传递给回调函数

3、ajaxSuccess()

监听ajax事件，ajax请求成功时执行函数

每一个ajax请求成功时都会触发

XMLHttpRequest对象和设置作为参数传递给回调函数

4、ajaxError

ajax事件，ajax请求失败执行的函数

每个ajax请求失败都会触发一次该函数

XMLHttpRequest 对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递。

callback 待执行的回调函数：

function (event, XMLHttpRequest, ajaxOptions, thrownError) {
      // thrownError 只有当异常发生时才会被传递
}

5、ajaxComplete

ajax事件，ajax请求完成时执行函数

每个ajax在请求完成后都会触发一次

XMLHttpRequest 对象和设置作为参数传递给回调函数。

6、ajaxStop

ajax事件，ajax请求结束后执行该函数

如果有ajax，只会触发一次

//提前准备钩子函数
$(window).ajaxStart(function(){
	console.log('第一个请求马上开始')
})
$(window).ajaxSend(function(){
	console.log('有一个请求马上发送')
})
$(window).ajaxSuccess(function(){
	console.log('有一个请求成功了')
})
$(window).ajaxErroe(function(){
	console.log('有一个请求失败了')
})
$(window).ajaxComplete(function(){
	console.log('有一个请求完成了')
})
$(window).ajaxStop(function((){
	console.log('所有的请求都结束了')
})

五、serialize()

序列表表格内容为字符串。用于发送ajax请求。

      <form id="login">
            <div><label><input type="text" name="user"></label></div>
            <div><label><input type="password" name="pwd"></label></div>
            <button class="btn">点击提交</button>
      </form>
      <script>
            $(".btn").click(function(e){
                  e.preventDefault();
                  // console.log($("#login").serialize());
                  $.ajax({
                        url:"./xhr.php",
                        type: "POST",
                        dataType: "json",
                        timeout: 3000
                  }).then(data=>console.log(data));
            })
      </script>