ajax请求

请求一览表

get请求

使用get方法需要先知道你所要请求的数据是json类型还是JSONP类型（JSON是一种基于文本的数据交换方式（不支持跨域），而JSONP是一种非官方跨域数据交互协议。）

json

$(function () {
    var user = {
        "username": "HelloWorld"
    };

    $.ajax({
        url: "http://localhost:8080/Changyou/UserInfo",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",  //json不支持跨域请求,只能使用jsonp
        data: {
            user: JSON.stringify(user)
        },
        success: function (data) {
            $("#user_name")[0].innerHTML = data.user_name;
            $("#user_teleNum")[0].innerHTML = data.user_teleNum;
            $("#user_ID")[0].innerHTML = data.user_ID;
        },
        error: function () {
            alert("请求超时错误!");
        }
    })
});

开发过程中，如果出现类似 “Origin ****** is not allowed by Access-Control-Allow-Origin.” 的错误，则可能是由于json数据不支持跨域导致的，应考虑使用jsonp协议。

如果出现类似 ”SyntaxError: Unexpected token ':'. Parse error.“ 的错误，则可能是由于返回的json数据没有用”callback“传递的函数名封装导致的。

jsonp

$(function () {

    var user = {
        "username": "HelloWorld"
    };

    $.ajax({
        url: "http://localhost:8080/Changyou/UserInfo",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",  //json不支持跨域请求,只能使用jsonp.dataType:预期服务器返回的数据类型。
        data: {
            user: JSON.stringify(user)
        },
        jsonp: "callback",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名,默认为callback,比如 {jsonp:'onjsonPLoad'} 会导致将 "onjsonPLoad=?" 传给服务器。
        jsonpCallback: "userHandler",  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
        success: function (data) {
            $("#user_name")[0].innerHTML = data.user_name;
            $("#user_teleNum")[0].innerHTML = data.user_teleNum;
            $("#user_ID")[0].innerHTML = data.user_ID;
        },
        error: function () {
            alert("请求超时错误!");
        }
    })
});

get请求另外的写法

json

$.get("http://datainfo.duapp.com/shopdata/getclass.PHP",
　　　　function(data){
            console.log(data)       
 　　　　}
)

jsonp两种：对于JSONP这两种写法的区别就在于传递参数的方式，第一种是直接在后面加？然后写数据，第二种是逗号隔开之后在大括号里写

$.get("http://datainfo.duapp.com/shopdata/getuser.PHP?userID=f66",
　　　　　　function(data){
            console.log(data)
        　　},
　　　　　　"JSONP");
$.get("http://datainfo.duapp.com/shopdata/getCar.PHP",
　　　　　　{userID:"f66"},
　　　　　　function(data){
            console.log(data)
        },
　　　　　　"JSONP")

post请求

jsonp也有两种写法

$.post("http://datainfo.duapp.com/shopdata/getuser.PHP?userID=f66",
　　function(data){
            console.log(data)        
　　},
　　"JSONP");      

$.post("http://datainfo.duapp.com/shopdata/getCar.PHP",
　　{userID:"f66"},
　　function(data){  
          console.log(data)
        },
　　"JSONP")

使用Post方式注意点

1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量. 通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www- form-urlencoded;")。

例：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 name=abc&sex=man&age=18

3.参数在Send(参数)方法中发送,例： xmlHttp.send(data); 如果是get方式，直接 xmlHttp.send(null);

4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username = $_POST["username"];

AJAX乱码问题

产生乱码的原因:
1、xtmlhttp 返回的数据默认的字符编码是utf-8，如果客户端页面是gb2312或者其它编码数据就会产生乱码
2、post方法提交数据默认的字符编码是utf-8，如果服务器端是gb2312或其他编码数据就会产生乱码

解决办法有：
1、若客户端是gb2312编码，则在服务器指定输出流编码
2、服务器端和客户端都使用utf-8编码

gb2312:header('Content-Type:text/html;charset=GB2312');

utf8:header('Content-Type:text/html;charset=utf-8');

参考文章：

json和jsonp的使用区别

jQuery的ajax详解

$.ajax设置的参数key参考文档：http://www.w3school.com.cn/jquery/ajax_ajax.asp

get请求

post请求

使用Post方式注意点

AJAX乱码问题

相关推荐