Ajax学习笔记（四）--- jQuery的 ajax 操作

一、$.ajax()

1、概念

​ 原生的 ajax 发送请求时，操作繁琐，代码量多。jQuery对这些操作进行了封装，使操作步骤更加简单，其中最基本、最底层的方法就是 $.ajax() 方法 。

2、常用的方法参数

名称	描述
url	请求地址，默认为当前页面
data	发送到服务器的请求参数
type	请求方式，get 或 post
async	布尔值，表示请求是否异步处理。默认是 true
jsonp	在一个 jsonp 请求中重写回调函数的名称
jsonpCallback	在一个 jsonp 请求中指定回调函数的名称
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
timeout	设置本地请求超时时间
beforeSend()	发送请求前运行的函数。
success()	请求成功时执行的函数
error()	请求失败时执行的函数
complete()	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）

3、基本使用

<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		var params = {name: 'wangwu', age: 300}
		$('#btn').on('click', function () {
			$.ajax({
				// 请求方式
				type: 'post',
				// 请求地址
				url: '/user',
				// 向服务器端发送的请求参数
				// name=zhangsan&age=100
				// data: {
				// 	name: 'zhangsan',
				// 	age: 100
				// },
				data: JSON.stringify(params),
				// 指定参数的格式类型
				contentType: 'application/json',
				// 请求成功以后函数被调用
				success: function (response) {
					// response为服务器端返回的数据
					// 方法内部会自动将json字符串转换为json对象
					console.log(response);
				}
			})
		});
	</script>

4、发送 jsonp 请求

	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
        // 定义的全局作用域的函数
		function fn (response) {
			console.log(response)
		}
		$('#btn').on('click', function () {
			$.ajax({
				url: '/jsonp',
				// 向服务器端传递函数名字的参数名称
				jsonp: 'cb',
                // 指定函数名称
				jsonpCallback: 'fn',
				// 代表现在要发送的是jsonp请求
				dataType: 'jsonp',
				success: function (response) {
					console.log(response)
				}
			})
		});
	</script>

5、serialize() / serializeArray()

概念：

​ serialize() 方法可以将 jQuery 获取的表单元素的数据自动拼接成参数字符串的形式。只会将提交成功的表单元素内容序列化为字符串，提交失败的表单元素会被放弃。而且想要表单元素的值包含到序列字符串中，元素必须包含 name 属性。

​ serializeArray() 方法是将 jQuery 获取的表单元素的数据 拼接成一个对象数组，数组元素具有两个属性：name 和 value 。

案例代码：

<form id="form">
	<input type="text" name="username">
	<input type="password" name="password">
	<input type="submit" value="提交">
</form>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
	$('#form').on('submit', function () {
		// 将表单内容拼接成字符串类型的参数
		// var params = $('#form').serialize();
		// console.log(params)
		serializeObject($(this));
		return false;
	});
    
	// 将表单中用户输入的内容转换为对象类型
	function serializeObject (obj) {
		// 处理结果对象
		var result = {};
		// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
		var params = obj.serializeArray();

		// 循环数组 将数组转换为对象类型
		$.each(params, function (index, value) {
			result[value.name] = value.value;
		})
		// 将处理的结果返回到函数外部
		return result;
	}
	</script>

二、$.get()

1、概念

​ $.get(URL,[data]，callback); 第一个参数是要请求的地址，第二个参数是要发送到服务器的参数数据，可以不写，第三个参数是请求成功后多执行的函数。

​ 是将$.ajax() 二次封装的结果。

2、案例代码

<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click', function () {
			$.get('/base', 'name=zhangsan&age=30', function (response) {
			 	console.log(response)
			})
		});
	</script>

三、$.post()

1、概念

​ $.post(URL,[data]，callback); 第一个参数是要请求的地址，第二个参数是要发送到服务器的参数数据，可以不写，第三个参数是请求成功后多执行的函数。

​ 是将$.ajax() 二次封装的结果。

2、案例代码

	<button id="btn">发送请求</button>
	<script src="/js/jquery.min.js"></script>
	<script>
		$('#btn').on('click', function () {
			$.post('/base', function (response) {
				console.log(response)
			})
		});
	</script>

四、全局事件

1、ajaxStart()

概念：

​ ajaxStart() 方法在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。无论在何时发送 Ajax 请求，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStart 事件。在此时，由 .ajaxStart() 方法注册的任何函数都会被执行。

案例代码：

$("#loading").ajaxStart(function(){
  $(this).show();
});

2、ajaxStop()

概念：

​ ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。无论 Ajax 请求在何时完成 ，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStop 事件。在此时，由 .ajaxStop() 方法注册的任何函数都会被执行。

案例代码：

$("div").ajaxStop(function(){
  alert("所有 AJAX 请求已完成");
});

五、其他常用方法

方法	描述
load()	从服务器加载html数据，然后把返回到 HTML 放入匹配元素。
$.getJSON	使用 GET 请求从服务器加载 JSON 编码数据。
$.getScript	使用 GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
abort()	可以中途中止ajax请求。