首页 > js学习 > js基础知识 > jQuery中Ajax的全局方法和表单序列化
2016
12-16

jQuery中Ajax的全局方法和表单序列化

.load()方法是局部方法,因为他需要一个包含元素的jQuery 对象作为前缀。而$.get()和$.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取,而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。

$.get()方法有四个参数,前面三个参数和.load()一样,多了一个第四参数type,即服务器返回的内容格式:包括xml、html、script、json、jsonp和 text。第一个参数为必选参数,后面三个为可选参数。

$('input').click(function () {$.get('test.php', {url : '111'}, function (response, status, xhr) {

if (status == 'success') {$('#box').html(response);}})

});

第三个参数可以是对象,也可以是字符串(如'url=111&type=get')。

第四参数type是指定异步返回的类型。一般情况下type参数是智能判断,并不需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。

$.post()的用法和$.get()相同,仅仅是数据传输方式不同

jQuery还提供了一组用于特定异步加载的方法:$.getScript(),用于加载特定的 JS文件;$.getJSON(),用于专门加载JSON 文件。

有时我们希望能够特定的情况再加载 JS文件,而不是一开始把所有 JS 文件都加载了,

$('input').click(function () {$.getScript('test.js');});//点击按钮后再加载 JS 文件

$.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。这个方法只有一个参数,传递一个各个功能键值对的对象。

url:String类型,发送请求的地址

type:String类型,请求方式:POST 或GET,默认 GET

timeout:Number类型,设置请求超时的时间(毫秒)

data:Object或String类型,发送到服务器的数据,键值对字符串或对象

dataType:String类型,返回的数据类型,比如html、xml、json 等

beforeSend:Function类型,发送请求前可修改XMLHttpRequest对象的函数

complete:Function类型,请求完成后调用的回调函数

success:Function类型,请求成功后调用的回调函数

error:Function类型,请求失败时调用的回调函数

global:Boolean类型,默认为true,表示是否触发全局Ajax

cache:Boolean类型,设置浏览器缓存响应, 默认为 true。 如果dataType类型为script或 jsonp则为 false。

content:DOM类型,指定某个元素为与这个请求相关的所有回调函数的上下文。

contentType:String类型,指定请求内容的类型。默认为application/x-www-form-urlencoded。

async:Boolean类型,是否异步处理。默认为true,false 为同步处理

processData:Boolean类型,默认为 true,数据被处理为 URL 编码格式。如果为 false,则阻止将传入的数据处理为 URL 编码的格式。

dataFilter:Function类型,用来筛选响应数据的回调函数。

ifModified:Boolean类型,默认为false,不进行头检测。如果为 true,进行头检测,当相应内容与上次请求改变时,请求被认为是成功的。

jsonp:String类型,指定一个查询参数名称来覆盖默认的 jsonp 回调参数名callback。

username:String类型,在HTTP 认证请求中使用的用户名

password:String类型,在HTTP 认证请求中使用的密码

scriptCharset:String类型,当远程和本地内容使用不同的字符集时,用来设置script和 jsonp请求所使用的字符集。

xhr:Function类型,用来提供XHR 实例自定义实现的回调函数

traditional:Boolean类型,默认为false,不使用传统风格的参数序列化。 如为true,则使用。

表单序列化:Ajax 用的最多的地方莫过于表单操作,而传统的表单操作是通过 submit提交将数据传输到服务器端。如果使用Ajax 异步处理的话,我们需要将每个表单元素逐个获取才方能提交。这样工作效率就大大降低。使用表单序列化方法.serialize(),会智能的获取指定表单内的所有元素。这样,在面对大量表单元素时,会把表单元素内容序列化为字符串,然后再使用Ajax 请求。

$('form input[type=button]').click(function () {$.ajax({type : 'POST',url : 'test.php',data : {user : $('form input[name=user]').val(),email : $('form input[name=email]').val()},success : function (response, status, xhr) {alert(response);}});

}); //常规形式的表单提交

使用.serialize()序列化表单内容:

$('form input[type=button]').click(function () {$.ajax({type : 'POST',url : 'test.php',data : $('form').serialize(),success : function (response, status, xhr) {alert(response);}});});

.serialize()方法不但可以序列化表单内的元素,还可以直接获取单选框、复选框和下拉列表框等内容。

$(':radio').click(function () {$('#box').html(decodeURIComponent($(this).serialize()));});//使用序列化得到选中的元素内容

除了.serialize()方法,还有一个可以返回 JSON 数据的方法:.serializeArray()。这个方法可以直接把数据整合成键值对的 JSON对象。

$(':radio').click(function () {console.log($(this).serializeArray());var json = $(this).serializeArray();$('#box').html(json[0].value);});

有时,我们可能会在同一个程序中多次调用$.ajax()方法。而它们很多参数都相同,这个时候我们课时使用jQuery 提供的$.ajaxSetup()请求默认值来初始化参数。

$('form input[type=button]').click(function () {

$.ajaxSetup({type : 'POST',url : 'test.php',data : $('form').serialize()});

$.ajax({success : function (response, status, xhr) {alert(response);}});

});

在使用data 属性传递的时候,如果是以对象形式传递键值对,可以使用$.param()方法将对象转换为字符串键值对格式。

var obj = {a : 1, b : 2, c : 3};

var form = $.param(obj);

alert(form);

使用$.param()将对象形式的键值对转为URL 地址的字符串键值对,可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限,所以直接传递 obj对象要谨慎。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。