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 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
PHP多进程简单实例小结
2019/11/09 PHP
jQuery的三种$()
2009/12/30 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
python实现简单温度转换的方法
2015/03/13 Python
jupyter安装小结
2016/03/13 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
django站点管理详解
2017/12/12 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
怎么快速自学python
2020/06/22 Python
巧克力蛋糕店创业计划书
2014/01/14 职场文书
2014年大学生自我评价
2014/01/19 职场文书
师生聚会感言
2014/01/26 职场文书
高级工程师英文求职信
2014/03/19 职场文书
幼儿老师求职信
2014/06/30 职场文书
查摆剖析材料范文
2014/09/30 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
毕业设计论文评语
2014/12/31 职场文书
法律进社区活动总结
2015/05/07 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL