Ajax與JSON詳細講解,Ajax傳遞JSON數據與Ajax接受JSON數據

AjaxJSON是密不可分的,因為目前我們大部分Ajax請求都采用JSON來完成前后端之間的數據交互。

Ajax傳遞JSON數據

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

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

  • 1.創建Ajax request對象
  • 2.綁定監聽回調函數
  • 3.打開一個Ajax請求
  • 4.設置請求頭(setRequestHeader) ,具體要設置什么請求頭,這個看業務需要。
  • 5.發送請求。
  • 6.接受請求。

具體代碼直接看下面:

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

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

我們從瀏覽器的請求信息里,可以看到提交參數,如下圖:

JSON提交返回參數

Ajax接受JSON數據

Ajax接受JSON數據,是表示被請求方返回為JSON數據,前端需要接收數據,并且解析數據。

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

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

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

                            

我們從瀏覽器控制臺(console)看到輸出的內容:

JSON參數輸出

版權所屬:SOJSON(原創文章)

原文地址:http://www.267332.tw/json/json_ajax.html

轉載時必須以鏈接形式注明原始出處及本聲明。

支付掃碼

所有贊助/開支都講公開明細,用于網站維護:贊助名單查看

查看我的收藏

正在加載... ...

广西十一选5开奖结