jQuery通过Ajax返回JSON数据


Posted in Javascript onApril 28, 2015

服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据。本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。JSON在前后台交互的过程中发挥着相当出色的作用。请接着往下看教程。

<ul id="userlist"> 
  <li><a href="#" rel="1">张三</a></li> 
  <li><a href="#" rel="2">李四</a></li> 
  <li><a href="#" rel="3">王五</a></li> 
</ul> 
<div id="info"> 
  <p>姓名:<span id="name"></span></p> 
  <p>性别:<span id="sex"></span></p> 
  <p>电话:<span id="tel"></span></p> 
  <p>邮箱:<span id="email"></span></p> 
</div>

实例中,显示了一个用户姓名列表ul#userlist,一个用户详细信息层#info。值得注意的是,我给每个<a>标签设置属性“rel”并赋值,这个很重要,将在jQuery中使用。我要实现的效果就是:当点击用户列表中任意用户的姓名,将即时显示出该用户的详细信息,如电话、EMAIL等。

CSS

#userlist{margin:4px; height:42px} 
#userlist li{float:left; width:80px; line-height:42px; height:42px; font-size:14px; 
font-weight:bold} 
#info{clear:left; padding:6px; border:1px solid #b6d6e6; background:#e8f5fe} 
#info p{line-height:24px} 
#info p span{font-weight:bold}

CSS设置了用户列表和用户详细信息的显示外观,您也可以自己设计一个好看的外观。

jQuery

使用jQuery前,别忘了先要确保载入的jQuery库。
<script type="text/javascript" src="../js/jquery.js"></script>
接下来开始写jQuery代码了。

$(function(){ 
  $("#userlist a").bind("click",function(){ 
    var hol = $(this).attr("rel"); 
    var data = "action=getlink&id="+hol; 
     
    $.getJSON("server.php",data, function(json){ 
      $("#name").html(json.name); 
      $("#sex").html(json.sex); 
      $("#tel").html(json.tel); 
      $("#email").html(json.email); 
    }); 
  }); 
});

我给用户列表的每个<a>标签都绑定一个click事件,当单击用户姓名时,执行以下操作:获取当前标签的属性“rel”的值,并组成一个数据串:var data = "action=getlink&id="+hol,接着通过ajax向服务端server.php发送JSON请求,得到后台响应后,返回JSON数据,并将得到的数据显示在用户详细信息中。

PHP

后台server.php得到前端的Ajax请求后,通过传递的参数连接数据库并查询用户表,将相应的用户信息转换成一个数组$list,最后将数组转换成JSON数据。关于PHP与JSON的操作可以查看本站收集的文章:。以下是server.php的详细代码,其中数据连接部分省略,请大家自行建立数据连接。

include_once("connect.php"); //连接数据库 
$action=$_GET[action]; 
$id=intval($_GET[id]); 
if($action=="getlink"){ 
  $query=mysql_query("select * from user where id=$id"); 
  $row=mysql_fetch_array($query); 
  $list=array("name"=>$row[username],"sex"=>$row[sex],"tel"=>$row[tel],"email"=>$row[email]); 
  echo json_encode($list); 
}

通过本文可以知道jQuery通过Ajax向服务端发送JSON请求,使用方法$.getJSON非常方便简单。并且可以将服务端返回的数据进行解析,得到相应字段的内容,相比像HTML请求返回的一大串字符串那样处理方便快捷。
最后附上mysql表结构

CREATE TABLE IF NOT EXISTS `user` ( 
 `id` int(11) NOT NULL auto_increment, 
 `username` varchar(100) NOT NULL, 
 `sex` varchar(6) NOT NULL, 
 `tel` varchar(50) NOT NULL, 
 `email` varchar(64) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js 走马灯简单实例
Nov 21 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
JSON 数据格式详解
Sep 13 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
javascript实现控制文字大中小显示
Apr 28 #Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 #Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 #Javascript
javascript中Function类型详解
Apr 28 #Javascript
浅谈Jquery为元素绑定事件
Apr 27 #Javascript
javascript实现实时输出当前的时间
Apr 27 #Javascript
javascript模拟php函数in_array
Apr 27 #Javascript
You might like
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
简述Angular 5 快速入门
2017/11/04 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
谈谈python垃圾回收机制
2020/09/27 Python
出国考察邀请函
2014/01/21 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2019学生会干事辞职信
2019/06/27 职场文书