前端学习——使用Ajax方式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
    【相关博文】

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,使用请慎重。

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
JS中的AJAX是一种进行异步数据传输的技术,而POST则是向服务器发送请求的一种HTTP方法。JSON即JavaScript Object Notation,是一种轻量级的数据交换格式,常用于前端与服务器之间的数据传输。 在前端开发中,我们经常需要通过AJAX向服务器请求数据并将其展示在页面上,而POST则是向服务器提交表单数据或修改数据等操作。如果我们需要将JSON格式的数据传输到服务器,可以通过AJAX发送POST请求并将数据转换成JSON格式。 举个例子,如果我们需要向服务器提交一个表单,可以使用以下代码: ``` // 获取表单数据 var formData = new FormData(document.getElementById("myForm")); // 将表单数据转换成JSON格式 var jsonData = {}; formData.forEach(function(value, key){ jsonData[key] = value; }); var jsonString = JSON.stringify(jsonData); // 发送POST请求 $.ajax({ type: "POST", url: "http://example.com/api", data: jsonString, contentType: "application/json; charset=utf-8", dataType: "json", success: function(data){ // 处理服务器返回的数据 }, error: function(){ // 处理请求失败的情况 } }); ``` 以上代码中,我们首先使用FormData对象获取表单数据,再将其转换成JSON格式的字符串。然后使用AJAX发送POST请求,并将数据类型设置为JSON。最后在success回调函数中处理服务器返回的数据,或在error回调函数中处理请求失败的情况。 总之,JS AJAX POST JSON前端开发中常用的一种技术,它可以实现异步数据传输和与服务器的交互,为实现动态网页的功能提供了重要的支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xukai871105

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值