JQuey.ajax的详细介绍

浅浅的花香味﹌ 2022-05-21 11:38 170阅读 0赞

首先来一个我们自己常用的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

======>

插播一条广告![大笑][laugh.gif]![大笑][laugh.gif]![大笑][laugh.gif]：

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'

[laugh.gif]: https://static-blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif