PHP+jQuery AJAX传递JSON数据简单教程
版权申诉
5星 · 超过95%的资源 102 浏览量
更新于2024-07-06
收藏 17KB DOCX 举报 “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格式回应，前端再将这些数据展示出来。整个过程实现了前后端的无缝通信，提高了用户体验。
data.job;
$("#result").html(str);
}
});
});
});
/script
/head
剩余20页未读，继续阅读
2021-12-16 上传
2022-11-30 上传
2022-11-26 上传
2022-06-05 上传
2022-01-21 上传
2022-01-14 上传
2023-05-18 上传
2022-01-20 上传
2011-10-29 上传
惚如远行客
- 粉丝: 0
- 资源: 5209
我的内容管理
展开
最新资源
- Java集合ArrayList实现字符串管理及效果展示
- 实现2D3D相机拾取射线的关键技术
- LiveLy-公寓管理门户：创新体验与技术实现
- 易语言打造的快捷禁止程序运行小工具
- Microgateway核心：实现配置和插件的主端口转发
- 掌握Java基本操作：增删查改入门代码详解
- Apache Tomcat 7.0.109 Windows版下载指南
- Qt实现文件系统浏览器界面设计与功能开发
- ReactJS新手实验：搭建与运行教程
- 探索生成艺术：几个月创意Processing实验
- Django框架下Cisco IOx平台实战开发案例源码解析
- 在Linux环境下配置Java版VTK开发环境
- 29街网上城市公司网站系统v1.0：企业建站全面解决方案
- WordPress CMB2插件的Suggest字段类型使用教程
- TCP协议实现的Java桌面聊天客户端应用
- ANR-WatchDog: 检测Android应用无响应并报告异常
