前端學習——使用Ajax方式POST JSON資料包

標籤：ajax   jquery   post   json   

0.前言    本文解釋如何使用Jquery中的ajax方法傳遞JSON資料包，傳遞的方法使用POST（當然PUT又有時也是一個不錯的選擇）。POST JSON資料包相比標準的POST格式可讀性更好些，階層也更清晰。    為了說明問題，前端和後端較為簡單，重點突出AJAX的應用。    【前端】——add-post-json.html
圖1 add頁面    【後端】——add-post-json.php

<?php// 返回JSON格式header('Content-Type:application/json;charset=utf-8');$result = array();// 獲得原始輸入內容$json = file_get_contents("php://input");//var_dump($input_str);// JSON轉換為PHP對象$obj = json_decode($json);$a = $obj->a; // var_dump($a);$b = $obj->b; // var_dump($b);$result["result"] = $a + $b;echo json_encode($result, JSON_NUMERIC_CHECK);?>

    【代碼倉庫】——test-jquery-ajax     代碼倉庫位於bitbucket使用Hg(而不是Git)，Hg在windows或ubuntu上均有很好用的GUI工具——TortoiseHg，本人愚笨沒能熟練掌握Git。    【TortoiseHg使用說明】——如果沒有使用過Hg請參考博文hg clone部分操作即可。       【JQuery 中文API】    【相關博文】    【前端學習——JQuery Ajax使用經驗】
1.POST JSON資料包

    var submit_sync = function() {        $.ajax({            type: "post",            url: 'add-post-json.php',            async: false, // 使用同步方式            // 1 需要使用JSON.stringify 否則格式為 a=2&b=3&now=14...            // 2 需要強制類型轉換，否則格式為 {"a":"2","b":"3"}            data: JSON.stringify({                                  a: parseInt($('input[name="a"]').val()),                b: parseInt($('input[name="b"]').val()),                now: new Date().getTime() // 注意不要在此行增加逗號            }),            contentType: "application/json; charset=utf-8",            dataType: "json",            success: function(data) {                $('#result').text(data.result);            } // 注意不要在此行增加逗號        });    }

【HTTP請求部分內容】POST /test-jquery-ajax/add-post-json.php HTTP/1.1 
Host: 192.168.1.104 
Connection: keep-alive 
Content-Length: 35 
Accept: application/json, text/javascript, */*; q=0.01 
X-Requested-With: XMLHttpRequest 
Content-Type: application/json; charset=UTF-8 

{"a":12,"b":34,"now":1403525674676}
【HTTP響應部分內容】HTTP/1.1 200 OKContent-Length: 13Content-Type: application/json;charset=utf-8{"result":46}
2.重要說明【1】需要使用JSON.stringify 否則HTTP請求為a=12&b=34。以下寫法並不能達到POST JSON資料包的效果，這是標準的POST格式。

data: {                      a: parseInt($('input[name="a"]').val()),    b: parseInt($('input[name="b"]').val()),    now: new Date().getTime() // 注意不要在此行增加逗號},

【HTTP請求部分內容】POST /test-jquery-ajax/add-post-json.php HTTP/1.1 
Host: 192.168.1.104 
Content-Length: 27 
X-Requested-With: XMLHttpRequest 
Content-Type: application/json; charset=UTF-8 

a=12&b=34&now=1403525989275
【2】需要強制類型轉換parseInt()，否則HTTP請求為 {"a":"12","b":"34"}以下代碼並不能達到預期效果

data: JSON.stringify({                      a: $('input[name="a"]').val(),    b: $('input[name="b"]').val(),    now: new Date().getTime() // 注意不要在此行增加逗號}),

【HTTP請求部分內容】POST /test-jquery-ajax/add-post-json.php HTTP/1.1 
Host: 192.168.1.104 
Content-Length: 39 
X-Requested-With: XMLHttpRequest 
Content-Type: application/json; charset=UTF-8 

{"a":"12","b":"34","now":1403526427890}
【3】IE8相容，IE7和IE6不支援JSON.stringify，使用請謹慎。