您的位置：首页 > Web前端 > JQuery

JQuery + JSON作为前后台数据交换格式实践

2014-09-30 22:52 357 查看

JQuery + JSON作为前后台数据交换

　　JQuery提供良好的异步加载接口AJAX，可以局部更新页面数据，
http://api.jquery.com/category/ajax/
　　JSON作为一种轻量数据格式，被浏览器js引擎普遍支持，同xml格式。

　　使用AJAX+JSON数据格式来实现动态页面，有以下好处：

1、松耦合，页面HTML和数据彻底分离，即表示层和数据层分开，有利前台样式定制。不同于以往后台脚本嵌套HTML标签，并输出数据到标签的合适位置，来实现动态页面，表示和数据搅合在一起。

2、支持与RPC对接，对于各种业务RPC（类似web service）可以整合到一个页面上展示和配置，例如一个个人网站页面上，显示的天气数据来自气象部门，日历中待办事项和存储事项，都是通过JSON数据格式与中华万年历网站交互的。

3、充分利用了JSON格式好处，层次化描述数据，相比form表单提交的x-www-form-urlencode格式的数据要强的多。

4、 AJAX带来和好处，可以局部更新页面，不用form表单整体提交，导致整个页面重载。

JSON前后台交互示例

　　前台文件client.html完全有html js书写，不包含任何PHP语法，其实现功能，将一个json字符串，通过ajax发送后后台（server.php），后台将受到的json字符串原封不动再输出到http响应中，此时前台ajax的success事件之前， ajax客户端收到响应的JSON字符串，然后将其转换为JSON对象，再调用success事件，在事件处理函数中，可以访问此对象。

前台文件 client.html

<html>
<head>
<script type="text/javascript" src="./jquery.js"></script>
<style>

</style>
</head>
<body>
<h1>hello world!</h1>

<script type='text/javascript'>

// 这里要使用拼接好的JOSN字符串
var data = '{ "classCode": "cellphone", "city": "GuangDong" }';
$.ajax({
type: "POST",
url: "/jsonServer.php",

// data sent is json
contentType: "application/json; charset=utf-8",
// Post 方式，data参数不能为空""，
//如果不传参数，也要写成"{}"，否则contentType将不能附加在Request Headers中。
data: data,

// data in response will expected json
dataType: "json",
anysc: false,
success: function (result) {
$("h1").text(result.city)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown + ':' + textStatus); // 错误处理
}
});
</script>
</body>
</html>

后台文件 server.php

<?php
// 将客户端发送的JSON数据原样发送回去
//"{symbol:'IBM', price:120}";
echo $HTTP_RAW_POST_DATA;
?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航