前言
这篇讲解前后端请求,包括ajax请求参数和封装ajax以及后台如何接收一系列过程
一、dataType和contentType区别
- contentType 告诉服务器,我要发什么类型的数据
- 告诉服务器,我要想什么类型的数据,如果没有指定,那么会自动推断是返回 XML,还是JSON,还是script,还是String。
二、contentType
2.1、定义
前端数据发送到服务器,默认application/x-www-form-urlencoded。特点:name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。
- application/x-www-form-urlencoded,
- multipart/form-data,
- application/json,
- text/plain
2.2、实例
简单的JSON
{
a: 1,
b: 2,
c: 3
}
复杂的JSON:对象嵌数组,数组中包括对象
{
data: {
a: [{
x: 2
}]
}
}
这个复杂对象, application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式,你传进去可以发送请求,但是服务端收到数据为空
那这么办
新定义一种类型:application/json,这种类型是 text
复杂JSON数据-->JSON.stringify序列化-->发送-->服务器端JSON.parse 进行还原
三、dataType
3.1、定义
dataType 服务器返回的数据类型。如果未指定任何内容,则jQuery将尝试根据响应的MIME类型进行推断。
- text 不会经过处理
- xml 不会经过处理
- html HTML作为一个字符串返回之前执行
- script 脚本作为一个文本数据返回
- json 作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回
- jsonp
四、ajax请求步骤
4.1、创建XMLHttpRequest异步对象
var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
4.2、注册回调函数
xmlHttp.onreadystatechange =callback1;
4.3 配置请求信息,open(),get
//get请求下参数加在url后,.ashx?methodName = GetAllComment&str1=str1&str2=str2
xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
//post请求下需要配置请求头信息
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
4.4、发送请求,post请求下,要传递的参数放这。
xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
4.5、创建回调函数
function callback1() {
if (xmlHttp.readyState == 4)
if (xmlHttp.status == 200) {
//取得返回的数据
var data = xmlHttp.responseText;
//json字符串转为json格式
data = eval(data);
$.each(data,
function(i, v) {
alert(v);
});
}
}