ajax请求

Posted 2021-02-10 中二的羊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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"];