PHP+jQuery AJAX传递JSON数据简单教程
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/star.98a08eaa.png)
“php基于jquery的ajax技术传递json数据简单实例” 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提高用户体验。本实例将详细介绍如何在PHP和jQuery环境下,通过AJAX传递JSON数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也方便机器解析和生成。 首先,HTML页面是用户交互的界面。在提供的示例中,HTML部分包括一个表单,用户可以在其中输入姓名、年龄和工作信息,以及一个“提交”按钮。当用户点击“提交”按钮时,会触发jQuery的AJAX事件。以下是HTML代码的简化版: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-1.8.2.min.js"></script> <script> $(function() { $("#send").click(function() { var cont = $("input").serialize(); $.ajax({ url: 'ab.php', type: 'post', dataType: 'json', data: cont, success: function(data) { var str = data.username + data.age + data.job; $("#result").html(str); } }); }); }); </script> </head> <body> <div id="result">一会看显示结果</div> <form id="my" action="" method="post"> <p><span>姓名:</span><input type="text" name="username"></p> <p><span>年龄:</span><input type="text" name="age"></p> <p><span>工作:</span><input type="text" name="job"></p> </form> <button id="send">提交</button> </body> </html> ``` 在这个HTML中,`$("#send").click`事件监听按钮的点击,`$("input").serialize()`将表单中的数据序列化为URL编码格式,然后通过`$.ajax`发送POST请求到服务器端的`ab.php`。`dataType: 'json'`表明我们期望服务器返回的数据类型是JSON。 在PHP部分,`ab.php`接收到AJAX请求后,读取POST参数并创建一个关联数组,将接收到的数据封装成JSON格式并返回。这是PHP代码的简化版: ```php <?php header("Content-type:text/html;charset=utf-8"); $username = $_POST['username']; $age = $_POST['age']; $job = $_POST['job']; $json_arr = array( "username" => $username, "age" => $age, "job" => $job ); echo json_encode($json_arr); ?> ``` `header`函数设置响应头,确保数据以UTF-8编码返回。接着,通过`$_POST`获取表单数据,并存储在相应的变量中。最后,`array`定义了一个关联数组,`json_encode`将其转换为JSON字符串,然后直接输出,返回给前端。 当AJAX请求成功,`success`回调函数会被调用,这里将接收到的JSON数据解码为JavaScript对象,并将其内容显示在页面的`#result`元素中。 总结来说,这个实例展示了如何使用jQuery的AJAX功能与PHP配合,通过JSON进行数据传递。用户在前端填写表单,点击提交后,数据通过AJAX无刷新地发送到服务器,服务器处理数据并以JSON格式回应,前端再将这些数据展示出来。整个过程实现了前后端的无缝通信,提高了用户体验。
![](https://csdnimg.cn/release/download_crawler_static/77133705/bg5.jpg)
剩余20页未读,继续阅读
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/99a985a0db404a9e81ed0e697bef6f4b_qq_38179036.jpg!1)
- 粉丝: 0
- 资源: 5209
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 中国微型数字传声器:技术革新与市场前景
- 智能安防:基于Hi3515的嵌入式云台控制系统设计
- 手机电量低时辐射真增千倍?解析手机使用谣言
- 56F803型DSP驱动的高精度大功率超声波电源控制策略研究
- ARM与GPRS结合的远程监测系统设计
- GPS与RFID技术结合的智能巡检系统设计
- CPLD驱动的低功耗爆炸场温度测试系统设计
- 基于FPGA的智能驱动控制系统:可扩展设计与工业网络协议
- 基于ATmega128和CH374的嵌入式USB接口设计
- 基于AT89C52的温度补偿超声波测距仪:高精度设计与应用
- MSP430F448单片机在交流数字电压表中的应用
- 提升变频器应用效率的12项实用技巧
- STM32F103在数字电镀电源并联均流系统中的应用
- PSpice仿真下的升压开关电源设计:拓扑分析与CCM稳定性提升
- 轻巧高效:MSP430主导的低成本无线传感器网络节点设计
- FPGA在EDA/PLD中实现LVDS接口的应用解析
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)