久久久国产精品va麻豆,精品一区二区三区在线观看视频,久久婷婷激情综合色综合俺也去

久久天天躁狠狠躁夜夜免费观看,精品国产粉嫩内射白浆内射双马尾,久久国产欧美日韩精品,久久久久久性高,激情欧美成人久久综合

Ajax與JSON詳細(xì)講解，Ajax傳遞JSON數(shù)據(jù)與Ajax接受JSON數(shù)據(jù)

Ajax與JSON是密不可分的，因為目前我們大部分Ajax請求都采用JSON來完成前后端之間的數(shù)據(jù)交互。

Ajax傳遞JSON數(shù)據(jù)

用一個原生的JavaScript來寫一個Ajax，來講述怎么提交JSON參數(shù)到后端，首先提交JSON數(shù)據(jù)，后端要以JSON方式接收，另外前端要采用POST提交方式，下面來直接看代碼。

Ajax原生的JavaScript寫法分為六步：

1.創(chuàng)建Ajax request對象
2.綁定監(jiān)聽回調(diào)函數(shù)
3.打開一個Ajax請求
4.設(shè)置請求頭（setRequestHeader），具體要設(shè)置什么請求頭，這個看業(yè)務(wù)需要。
5.發(fā)送請求。
6.接受請求。

具體代碼直接看下面：

//1.創(chuàng)建ajax request對象
var request = new XMLHttpRequest();
//2.綁定監(jiān)聽回調(diào)函數(shù)
request.onreadystatechange = function(){
    //判斷返回狀態(tài)是否正常
    if(request.readyState ===4 &&request.status === 200){
        //6.接收數(shù)據(jù)
        var res = request.responseText;
        //輸出數(shù)據(jù)
        console.log('返回值',res);
    }else{
        //錯誤
        console.log('error');
    }
};

/**
 * 3.打開請求
 * 第一個參數(shù)為請求方式，常用可選為 GET/POST，還有DELETE、UPDATE、OPTIONS等
 * 第二個參數(shù)為請求的鏈接，可以是相對路徑和絕對路徑。
 * 第三個參數(shù)設(shè)置請求為同步還是異步，true為異步，false為同步
 */
request.open("POST","https://cdn.sojson.com/file/demo-json.json",true);
/**
 * 4. setRequestHeader 方法可以設(shè)置請求頭，這個看業(yè)務(wù)需要，這里設(shè)置為表單提交
 */
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
 * 5.發(fā)送請求
 *
 * GET請求方式：request.send();
 *
 * POST請求方式：可以傳參，可以是字符型的JSON或者 ？和 &方式如下：
 * request.send("name=Alice&age=23");
 * //這個方式如果后端接受不到參數(shù)，請把請求頭改成 "Content-type","application/json"
 *
 *
 *
 */
//發(fā)送JSON數(shù)據(jù)
request.send('{"name":"Alice","age":23}');

我們從瀏覽器的請求信息里，可以看到提交參數(shù)，如下圖：

JSON提交返回參數(shù)

Ajax接受JSON數(shù)據(jù)

Ajax接受JSON數(shù)據(jù)，是表示被請求方返回為JSON數(shù)據(jù)，前端需要接收數(shù)據(jù)，并且解析數(shù)據(jù)。

Ajax 步驟還是和上面一樣，還是6個步驟，我們直接看代碼。

//1.創(chuàng)建ajax request對象
var request = new XMLHttpRequest();
//2.綁定監(jiān)聽回調(diào)函數(shù)
request.onreadystatechange = function(){
    //判斷返回狀態(tài)是否正常
    if(request.readyState ===4 &&request.status === 200){
        //6.接收數(shù)據(jù)
        var res = request.responseText;
        //輸出數(shù)據(jù)
        console.log('返回值',res);

        /**
         * 如果返回來的參數(shù)是JSON，就可以直接轉(zhuǎn)換。
         */
        var json = JSON.parse(res);
        console.log('返回值-轉(zhuǎn)換JSON對象',json);
        console.log('demo:',json.demo);
        console.log('Name:',json.Name);
        console.log('Birthday:',json.Birthday);
        console.log('Birthday:',json.Birthday);
        console.log('Birthplace:',json.Birthplace);
        console.log('Info:',json.Info);

    }else{
        console.log('error');
    }
};

/**
 * 3.打開請求
 * 第一個參數(shù)為請求方式，常用可選為 GET/POST，還有DELETE、UPDATE、OPTIONS等
 * 第二個參數(shù)為請求的鏈接，可以是相對路徑和絕對路徑。
 * 第三個參數(shù)設(shè)置請求為同步還是異步，true為異步，false為同步
 *
 * 備注：GET請求，直接把參數(shù)以 ？和 & 來傳參，如 url+  ?name=Alice&age=23
 */
request.open("GET","https://cdn.sojson.com/file/demo-json.json",true);
/**
 * 4. setRequestHeader 方法可以設(shè)置請求頭，這個看業(yè)務(wù)需要，這里設(shè)置為表單提交
 */
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
 * 5.發(fā)送請求
 *
 * GET請求方式：request.send();
 *
 * POST請求方式：可以傳參，可以是字符型的JSON或者 ？和 &方式如下：
 * request.send("name=Alice&age=23");
 * //這個方式如果后端接受不到參數(shù)，請把請求頭改成 "Content-type","application/json"
 * request.send('{"name":"Alice","age":23}');
 *
 *
 */
request.send();

我們從瀏覽器控制臺（console)看到輸出的內(nèi)容：

JSON參數(shù)輸出