首先来一个我们自己常用的ajax请求:
$.ajax({
type : "POST",
url : "http://test.xzz.com/ELS/query",
contentType: "application/json",
data : JSON.stringify({name : "name" , gender : "gender"}),
dataType : 'json',
success : function(data){
//处理返回后的数据
}
})
相信大部分人的ajax是这样写,我以前也是这样写的,觉得非常方便。直到有一天,在做项目的时候发现,ajax请求到不了后台
这个时候,不报错也任何提示都没有,当时找了大半天没有找原因。最后问了一个经验丰富的人,他给我加了如下的一段代码:
error : function(XMLHttpRequest,textStatus,errorThrown){
alert(textStatus);
}
马上就找到了问题的原因。
其实这个方法ajax本身就有的只是我们用的很少,基本就忘记了。但是在出错的时候,它的作用就不可忽视了
接下来,是自己对ajax参数的一些整理,请各位笑纳!
1、完整常用版ajax请求:
$.ajax({
type : "post", //请求方法
url : "http://test.xzz.com/ELS/query", //请求地址
async : false, //是否异步请求
contentType : application/x-www-form-urlencoded, //发送服务器是内容编码类型
data : {username : "name" , password : "pwd"}, //发送的数据
dataType : "json", //返回数据类型
beforeSend : function(XMLHttpRequest){
this; // the options for this ajax request
}, //请求前进行的操作
success : function(data,textStatus){
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}, //请求成功后的回调函数
complete : function(XMLHttpRequest,textStatus){
this; // the options for this ajax request
}, //请求完成后的回调函数
error : function(XMLHttpRequest,textStatus,errorThrown){
// 通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax request
} //请求失败后的回调函数
})
2、简版ajax的json数据格式请求
$.ajax({
type : "post",
url : "http://test.xzz.com/ELS/query",
dataType : 'json', //返回数据类型
contentType : 'application/json', //json编码类型
data : JSON.stringify({name : "name" , gender : "gender"}) //json序列化
success : function(data){
},
error : function(XMLHttpRequest,textStatus,errorThrown){
}
})
接下来我们重点介绍一下常用的一些参数:
type : 请求方式(默认:GET),常用的是GET和POST,但是其实还有PUT和DELETE两种url : 发送请求的地址
async : 是否异步请求(默认:true),false的情况下,用户其它操作必须等待请求完成才可以执行
contentType : 发送信息至服务器时内容编码类型(默认:application/x-www-form-urlencoded)--
常用的是application/x-www-form-urlencoded和application/json;charset=utf-8,不常用的有
text/html,text/xml
======>
插播一条广告:
EncType属性规定在发送到服务器之前应该如何对表单数据进行编码:application/x-www-form-urlencoded : 表单数据编码为键值对,&分隔
multipart/form-data : 表单数据编码为一条消息,每个控件对应消息的一部分
text/plain : 表单数据以纯文本形式进行编码
post将表单数据封装在 http body 中,然后发送到服务器get将表单数据添加到 url 后面,以?分割 url 和数据
<======
data :发送到服务器的数据。发送到服务器的数据,将自动转换为请求字符串格式。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["str1", "str2"]} 转换为 '&foo=str1&foo=str2'。
dataType : 返回数据类型。"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text":返回纯文本字符串
error : 请求失败后的回调函数。 XMLHttpRequest 对象、错误信息、(可选)捕获的错误对象发生错误时,错误信息除了 null 之外,还可能是这些情况,textStatus : timeout(超时), error(错误), notmodified 和 parsererror(解析错误)。
success : 并根据 dataType 参数进行处理后的数据,描述状态的字符串
XMLHttpRequest对象,写过原生ajax的人应该都知道,ajax的核心是在JavaScript中添加一个 xmlHttpRequest 对象,所有的请求都是xmlHTTPRequest对象来完成的。
下面是我踩过的坑,分享给大家:
1、我们使用ajax的时候可能会遇到这样一种情况,我们发送请求之后,请求到不了后台,但是也不报错。打开浏览器去查看 url 没有错,请求的状态码也是为 200 。这种情况我们可以使用 error 函数将 textStatus 打印出来。一般出的错误是发送的数据格式、数据字段等和后台接收的数据格式、数据字段不匹配。415错误以及400错误一般情况都是这个原因。
2、如果发送的数据 data 为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["str1", "str2"]} 转换为 '&foo=str1&foo=str2'