使用Ajax方式POST JSON數據包（轉）

add by zhj: 用ajax發送json數據時注意兩點，

第一，使用JSON.stringify()函數將data轉為json格式的字符串，如下

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"

（注：$.ajax中的參數dataType相當於accept header)

 

原文：http://blog.csdn.net/xukai871105/article/details/33800935

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 OK

Content-Length: 13

Content-Type: application/json;charset=utf-8

 

{"result":46}

 

2.重要說明

【1】

需要使用JSON.stringify，它將js的數據類型轉為json格式的字符串: '{"a":12,"b":34,"now":1403525674676}'

如果不用JSON.stringify，那POST消息體是普通的字符串: 'a=12&b=34&now=1403525674676'

以下寫法並不能達到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，使用請慎重。