JQuery + JSON作为前后台数据交换格式实践
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;
?>
JQuery + JSON作为前后台数据交换格式实践的更多相关文章
- JQuery + XML作为前后台数据交换格式实践
JQuery + xml作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ xml作为一种 ...
- 二维码与json都是数据交换格式
二维码与json都是数据交换格式: UI数据是人机数据交换格式.
- XML和JSON两种数据交换格式的比较
在web开发领域,主要的数据交换格式有XML和JSON,对于在 Ajax开发中,是选择XML还是JSON,一直存在着争议,个人还是比较倾向于JSON的.一般都输出Json不输出xml,原因就是因为 x ...
- 【学习】006数据交换格式与SpringIOC底层实现
课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...
- 2016/4/2 json:js和jquery中轻量级数据交换格式 例: 窗口弹出 popwindow
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
- json:js和jquery中轻量级数据交换格式
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
- 数据交换格式之 - Json
Json简介: JSON是JavaScript对象表示法,是一种与语言无关的数据交换的格式,是一种完全独立于语言的文本格式. 使用ajax进行前后台数据交换,移动端与服务端的数据交换. web客户端和 ...
- 在.NET使用JSON作为数据交换格式
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://zhoufoxcn.blog.51cto.com/792419/517093 我们 ...
- json 数据交换格式与java
http://wiki.mbalib.com/wiki/数据交换 数据交换是指为了满足不同信息系统之间数据资源的共享需要,依据一定的原则,采取相应的技术,实现不同信息系统之间数据资源共享的过程. 数据 ...
随机推荐
- 20145304 第五周Java学习报告
20145304<Java程序设计>第5周学习总结 教材学习内容总结 1.使用try.catch: 如果使用了try.catch,编译时会尝试执行try区块中的程序代码,如果有错误,执行流 ...
- ACM 阶乘之和
阶乘之和 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 给你一个非负数整数n,判断n是不是一些数(这些数不允许重复使用,且为正数)的阶乘之和,如9=1!+2!+3! ...
- URAL 1152. False Mirrors(DP)
题目链接 理解了题意之后,就不难了..状态压缩+暴力. #include <cstring> #include <cstdio> #include <string> ...
- poj 1847 最短路简单题,dijkstra
1.poj 1847 Tram 最短路 2.总结:用dijkstra做的,算出a到其它各个点要改向的次数.其它应该也可以. 题意: 有点难懂.n个结点,每个点可通向ki个相邻点,默认指向第一个 ...
- XCode编译文件过多导致内存吃紧解决方法
XCode编译文件过多导致内存吃紧解决方法 /Users/~~/Library/Developer/Xcode/DerivedData 1) 然后 找到编译文件 删除 就好了哦 快去试试看吧
- LBS基站数据解析接口
http://www.cellocation.com/interfac/#hybrid http://www.cellid.cn/ https://www.juhe.cn/docs/api/id/8
- 纪念逝去的岁月——C++实现一个栈(使用类模板)
这个版本是上个版本的加强版,上个版本的代码:http://www.cnblogs.com/fengbohello/p/4542912.html 目录 1.代码 2.运行结果 1.代码 1.1 调试信息 ...
- 使用C#实现FTP的文件上传和下载【转】
参考博文:http://blog.163.com/mity_rui@126/blog/static/1098136182013101525615577/
- Jenkins 2.7.3 LTS 发布
更新如下: Stop A/B testing of the remoting JNLP3 protocol due to the known issues. The protocol can be e ...
- 创建型模式(前引)简单工厂模式Simple Factory
一引出的原因(解决下面的问题) 简单工厂模式(Simple Factory Pattern):又称为静态工厂方法(Static Factory Method)模式,它属于类创建型模式. 在简单工厂模式 ...