最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery Ajax+PHP返回JSON数据实例教程
时间：2013-05-15 编辑：简简单单 来源：一聚教程网
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON在前后台交互的过程中发挥着相当出色的作用。请接着往下看教程。
mysql表结构
| 代码如下 | 复制代码 |
|
CREATE TABLE IF NOT EXISTS `user` ( |
|
XHTML
| 代码如下 | 复制代码 |
|
姓名： 性别： 电话： 邮箱： |
|
实例中，显示了一个用户姓名列表ul#userlist，一个用户详细信息层#info。值得注意的是，我给每个标签设置属性“rel”并赋值，这个很重要，将在jQuery中使用。我要实现的效果就是：当点击用户列表中任意用户的姓名，将即时显示出该用户的详细信息，如电话、EMAIL等。
CSS
| 代码如下 | 复制代码 |
|
#userlist{margin:4px; height:42px} |
|
CSS设置了用户列表和用户详细信息的显示外观，您也可以自己设计一个好看的外观。
jQuery
使用jQuery前，别忘了先要确保载入的jQuery库。
| 代码如下 | 复制代码 |
|
|
|
接下来开始写jQuery代码了。
| 代码如下 | 复制代码 |
|
$(function(){ |
|
PHP
后台server.php得到前端的Ajax请求后，通过传递的参数连接数据库并查询用户表，将相应的用户信息转换成一个数组$list，最后将数组转换成JSON数据。关于PHP与JSON的操作可以查看本站收集的文章：PHP中JSON的应用。以下是server.php的详细代码，其中数据连接部分省略，请大家自行建立数据连接。
| 代码如下 | 复制代码 |
|
include_once("connect.php"); //连接数据库 |
|
通过本文可以知道jQuery通过Ajax向服务端发送JSON请求，使用方法$.getJSON非常方便简单。并且可以将服务端返回的数据进行解析，得到相应字段的内容，相比像HTML请求返回的一大串字符串那样处理方便快捷。
完整实例
| 代码如下 | 复制代码 |
|
| |