Stay Hungry,Stay Foolish!

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; 
?>

 

posted @   lightsong  阅读(4095)  评论(0)  编辑  收藏  举报
编辑推荐：
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
· ［.NET］调用本地 Deepseek 模型
阅读排行：
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）
千山鸟飞绝，万径人踪灭
点击右上角即可分享
微信分享提示