jQuery ajax

回顾原生JS ajax

查看之前的博文 ajax 和 mock 数据
w3school 关于ajax

原生JS ajax 的用法

 ?var xhr = new XMLHttpRequest() ?xhr.open(‘GET‘,‘https://www.easy-mock.com/mock/5b7238fdf22b3d63d2d67b28/jQuery-mock-test‘,true) ?xhr.send() ?xhr.addEventListener(‘load‘,function(){ ???console.log(xhr.status) ???if((xhr.status >= 200 && xhr.status < 300)|| xhr.status === 304){ ?????var data = xhr.responseText ?????console.log(data) ???}else{ ?????console.log(‘error‘) ???} ?}) ?xhr.onerror = function(){ ???console.log(‘error‘) ?}

jQuery 的 ajax 用法

先看一个 $.ajax 的案例

 ?$.ajax({ ???url: ‘https://www.easy-mock.com/mock/5b7238fdf22b3d63d2d67b28/jQuery-mock-test‘, ???method: ‘GET‘ ?}).done(function(result){ ???console.log(result) ?}).fail(function(){ ???console.log(‘error‘) ?})

最下 demo 模拟该 ajax 案例，mock 数据结果如下图

jQuery.ajax( [settings ] )

方法提供了几个常用的setting

• async：默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true）。如果需要发送同步请求，请将此选项设置为false

• beforeSend：请求发送前的回调函数，用来修改请求发送前 jqXHR 对象，此功能用来设置自定义 HTTP 头信息，等等。该 jqXHR 和设置对象作为参数传递

• cache：如果设置为false ，浏览器将不缓存此页面。注意：设置cache为 false将在 HEAD 和 GET 请求中正常工作。它的工作原理是在 GET 请求参数中附加"_={timestamp}"

• context：这个对象用于设置 ajax 相关回调函数的上下文。 默认情况下，这个上下文是一个 ajax 请求使用的参数设置对象

• data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面，POST请求作为表单数据

• headers：一个额外的{键:值}对映射到请求一起发送。此设置会在 beforeSend 函数调用之前被设置；因此，请求头中的设置值，会被 beforeSend 函数内的设置覆盖

• method：HTTP 请求方法（比如："POST"，"GET "，"PUT"，1.9之前使用 type）
  

jQuery.get( [settings] ) / jQuery.post( [settings ] )

这两个方法专门用来处理 get 和 post 请求

$.ajax 写法

$.ajax({ ?url: url, ?data: data, ?success: success, ?dataType: dataType})$.ajax({ ?type: "POST", ?url: url, ?data: data, ?success: success, ?dataType: dataType})

$.get 写法

 ?$.get(‘https://www.easy-mock.com/mock/5b7238fdf22b3d63d2d67b28/jQuery-mock-test‘).done(function(result){ ???console.log(result) ?})

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

$.ajax 写法

$.ajax({ ?dataType: "json", ?url: url, ?data: data, ?success: success})

$.getJSON 写法

 ?$.getJSON(‘https://www.easy-mock.com/mock/5b7238fdf22b3d63d2d67b28/jQuery-mock-test‘,function(result){ ???console.log(result) ?})

.serialize() / serializeArray()

将用作提交的表单元素的值编译成字符串，方法没有参数，使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作，比如<input>, <textarea>, 和 <select>

<form id="holder"> ?<input type="text" name="a" value="1"/> ?<div> ???<input type="text" name="b" value="2" id="b" /> ?</div> ?<input type="hidden" name="c" value="3" id="c" /> ?<div> ???<input type="checkbox" name="f" value="8" checked="true"/> ???<input type="checkbox" name="f" value="9" checked="true"/> ?</div></form>

$("#holder").serialize(); //a=1&b=2&c=3&f=8&f=9$("#holder").serializeArray();/* ???[ ?????{name: ‘a‘, value: ‘1‘}, ?????{name: ‘b‘, value: ‘2‘}, ?????{name: ‘c‘, value: ‘3‘}, ?????{name: ‘f‘, value: ‘8‘}, ?????{name: ‘f‘, value: ‘9‘} ???]*/

serialize 和serializeArray 都是针对 jQuery对象（选中的 form 元素）进行操作，只是返回值格式不同。

特别注意：这2个 API 只能操作form，如果将 holder 改成 div，则不起任何作用。

Demo 地址

上面案例的 ajax 模拟