初学Ajax(三)
$.ajax()
$.ajax()是所有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，则使用。 |
html(部分)代码如下：
<input type="button" value="异步加载数据" />
post方式接受的test.php：
<?php if($_POST['url'] == 'ycku') { echo "瓢城Web俱乐部"; } else { echo "木有！"; } ?>
jQuery代码如下：
$("input").click(function() {
$.ajax({
type:"post", //这里可以换成GET
url:"test.php",
data:{
url:"ycku"
},
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
注意：对于data属性，如果是GET模式，可以使用三种之前说所的三种形式。如果是POST模式可以使用之前的两种形式。
表单序列化
Ajax用的最多的地方莫过于表单操作，而传统的表单操作是通过submit提交将数据传输到服务器端。如果使用Ajax异步处理的话，我们需要将每个表单元素逐个获取方才能提
交，这样工作效率就大大降低。
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body>
<form> 用户名：<input type="text" name="user" /> 邮 件：<input type="text" name="email" /> <input type="button" value="提交" /> </form> <div id="box"> </div> </body> </html>
post方式接受的user.php：
<?php echo $_POST['user'].' - '.$_POST['email']; ?>
常规形式的表单提交：
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"user.php",
data:{
user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
},
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
以上方法的缺点：表单元素特别多的情况下，写起来非常麻烦，容易出错，复制提交的JS内容时，data属性需要修改的非常多。而使用表单序列化方法.serialize()，会智能的获取指定表单内的所有元素。这样，在面对大量表单元素时，会把表单元素内容序列化为字符串，然后再使用Ajax请求。
使用.serialize()序列化表单内容：
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"user.php",
data:$("form").serialize(), //一句话搞定
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
alert($("form").serialize()); //字符串形式的键值对，并且还对url进行了编码
.serialize()方法不但可以序列化表单内的元素，还可以直接获取单选框、复选框和下拉列表框等内容。
如html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <form> 用户名：<input type="text" name="user" /> 邮 件：<input type="text" name="email" /> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <input type="button" value="提交" /> </form> <div id="box"> </div> </body> </html>
使用序列化得到单选框中的元素内容：
$("form input[name=sex]").click(function() {
$("#box").html(decodeURIComponent($(this).serialize())); //返回 sex=男/女
});
除了.serialize()方法，还有一个可以返回JSON数据的方法：.serializeArray()。这个方法可以直接把数据整合成键值对的JSON对象。
$("form input[name=sex]").click(function() {
//console.log($(this).serializeArray()); //控制台输出Array[Object] 即{name:"sex",value:"男"}/{name:"sex",value:"女"}
var json = $(this).serializeArray();
$("#box").html(json[0].name + "=" + json[0].value);
});
有时，我们可能会在同一个程序中多次调用$.ajax()方法，而它们很多参数都相同，这个时候我们可以使用jQuery提供的$.ajaxSetup()方法请求默认值来初始化参数。
//初始化重复的属性 $.ajaxSetup({ type:"post", url:"user.php", data:$("form").serialize() }); $("form input[type=button]").click(function() { $.ajax({ success:function(response, status, xhr) { $("#box").html(response); } }); });
在使用data属性传递的时候，如果是以对象形式传递键值对，可以使用$.param()方法将对象转换为字符串键值对格式。
alert($.param({ // 返回，如：user=123&email=123%40163.com
user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
}));
$("form input[type=button]").click(function() {
$.ajax({
type:"post",
url:"user.php",
data:$.param({
user:$("form input[name=user]").val(),
email:$("form input[name=email]").val()
}),
success:function(response, status, xhr) {
$("#box").html(response);
}
});
});
注意：使用$.param()将对象形式的键值对转为URL地址的字符串键值对，可以更加稳定准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递obj对象要谨慎。
