JQuery中$.ajax()方法浅谈
sanlanlan 2018-2-9 标签: js 浏览:1663 评论:0
jquery中的ajax方法参数详解:
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖全局设置。
cache: 要求为Boolean类型的参数,默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
data: 要求为 Object或String类型的参数,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType:
要求为String类型的参数,
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
- "xml": 返回 XML 文档,可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
- "text": 返回纯文本字符串
回调函数
如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。
beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}
success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
(1)由服务器返回,并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}
error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}
示例代码1:
$(function(){ $('#id').click(function(){ $.ajax({ type: "GET", url: "yourselfURL", data: {param1:$("#id1").val(), param2:$("#id2").val()}, dataType: "json", success: function(data){ $('#resText').empty(); //清空resText里面的所有内容 var html = ''; $.each(data, function(commentIndex, comment){ html += '<span class="badge">' +parseInt(commentIndex +1) + '</span>'; html += '<span>'+comment['address']+ '</span>'; html += '<span>' +comment['content']+ '</span>'; }); $('#resText').html(html); } }); }); });
//返回来的data
"data": [
{
"id": "22",
"address": "上海"
,
"
content": "ok"
},
{
"id": "33",
"address": "深圳",
"content": "yes"
}]
这边的$.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。
示例代码2:
//$.ajax带json数据的异步请求
var ajax = $.ajax( {
url:URL
data:{
selRollBack : selRollBack,
selOperatorsCode : selOperatorsCode,
PROVINCECODE : PROVINCECODE,
pass2 : pass2
},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
if(data.msg =="true" ){
alert("修改成功!");
window.location.reload();
}else{
view(data.msg);
}
},
complete: function() {
if (Object.prototype.toString.apply(completeCallback) === "[object Function]") {
completeCallback();
} else {
_hideLoading();
}
},
error: function(xhl, textStatus, errorThrown) {
if (Object.prototype.toString.apply(errorCallback) === "[object Function]") {
errorCallback();
} else {
showAjaxErrorError(xhl, textStatus, errorThrown);
}
}
});
示例代码3:
//$.ajax序列化表格内容为字符串的异步请求
function test(){
var data = $("#form1").serialize();//序列化表格内容为字符串
$.ajax({
type:'post',
url:URL,
data:data,
cache:false,
dataType:'json',
success:function(data){
}
});
}
发表评论: