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作为前后台数据交换格式实践的更多相关文章

  1. JQuery + XML作为前后台数据交换格式实践

    JQuery + xml作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ xml作为一种 ...

  2. 二维码与json都是数据交换格式

    二维码与json都是数据交换格式: UI数据是人机数据交换格式.

  3. XML和JSON两种数据交换格式的比较

    在web开发领域,主要的数据交换格式有XML和JSON,对于在 Ajax开发中,是选择XML还是JSON,一直存在着争议,个人还是比较倾向于JSON的.一般都输出Json不输出xml,原因就是因为 x ...

  4. 【学习】006数据交换格式与SpringIOC底层实现

    课程目标 XML和JSON Java反射机制 手写SpringIOC 什么是数据交换格式 客户端与服务器常用数据交换格式xml.json.html 数据交换格式用场景 移动端(安卓.IOS)通讯方式采 ...

  5. 2016/4/2 json：js和jquery中轻量级数据交换格式 例： 窗口弹出 popwindow

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  6. json：js和jquery中轻量级数据交换格式

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  7. 数据交换格式之 - Json

    Json简介: JSON是JavaScript对象表示法,是一种与语言无关的数据交换的格式,是一种完全独立于语言的文本格式. 使用ajax进行前后台数据交换,移动端与服务端的数据交换. web客户端和 ...

  8. 在.NET使用JSON作为数据交换格式

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://zhoufoxcn.blog.51cto.com/792419/517093 我们 ...

  9. json 数据交换格式与java

    http://wiki.mbalib.com/wiki/数据交换 数据交换是指为了满足不同信息系统之间数据资源的共享需要,依据一定的原则,采取相应的技术,实现不同信息系统之间数据资源共享的过程. 数据 ...

随机推荐

  1. IOS关于UIViewController之间的切换

    IOS关于UIViewController之间的切换 1.NavigationController切换UIViewController的两种方式 方法一右侧进入 1 SecondViewControl ...

  2. 3分钟4个步骤超级简单入门配置lamp

    按照我下面的推荐博客进行3步安装,最后进行一步测试就完成了.环境:我的环境是在windows10中安装的VMware中安装的Ubuntu虚拟机,Windows8,7应该是一样的测试:分别用localh ...

  3. spring源码学习之路---深度分析IOC容器初始化过程（四）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 最近由于工作和生活,学习耽搁 ...

  4. Poj 3250 单调栈

    1.Poj 3250  Bad Hair Day 2.链接:http://poj.org/problem?id=3250 3.总结:单调栈 题意:n头牛,当i>j,j在i的右边并且i与j之间的所 ...

  5. 本地C代码中创建Java对象

    作者:唐老师,华清远见嵌入式学院讲师. 创建Java域的对象就是创建Java类的实例,再调用Java类的构造方法. 以Bitmap的构建为例,Bitmap中并没有Java对象创建的代码及外部能访问的构 ...

  6. golang github.com/go-sql-driver/mysql 遇到的数据库,设置库设计不合理的解决方法

    golang github.com/go-sql-driver/mysql 遇到的数据库,设置库设计不合理的解决方法,查询中报了以下这个错 Scan error on column index 2: ...

  7. C# async

    I/O should use async, asynchronous method can be achieved: message, delegate, multi-threading Thread ...

  8. 数据库之SQL语法

    -- 创建数据库CREATE DATABASE mytest; -- 创建表CREATE TABLE t_user( -- primary key 定义该列为主键列 -- AUTO_INCREMENT ...

  9. js从身份证号中获取出生日期和性别

    今天,在做移动端的项目中,按照设计稿的要求,是可以让用户自己输入出生日期的,我还很认真的用了刚刚知道的html5表单的日期类型,本想着终于不用日期插件就可以实现用户选择自己的出生日期了,可结果老大说, ...

  10. [CareerCup] 18.10 Word Transform 单词转换

    18.10 Given two words of equal length that are in a dictionary, write a method to transform one word ...