前端学习——使用Ajax方式POST JSON数据包

时间：2023-03-08 16:13:32
0.前言
    本文解释怎样使用Jquery中的ajax方法传递JSON数据包，传递的方法使用POST（当然PUT又有时也是一个不错的选择）。POST JSON数据包相比标准的POST格式可读性更好些，层次结构也更清晰。
    为了说明问题，前端和后端较为简单，重点突出AJAX的应用。
    【前端】——add-post-json.html
前端学习——使用Ajax方式POST JSON数据包
前端学习——使用Ajax方式POST JSON数据包
图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】
    【相关博文】

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 否则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，使用请谨慎。

相关文章