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 相关文章推荐
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
简单分析javascript中的函数
Sep 10 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
vue中如何实现变量和字符串拼接
Jun 19 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
Django返回json数据用法示例
2016/09/18 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
postman和python mock测试过程图解
2020/02/22 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
车间主任岗位职责
2014/03/16 职场文书
环保倡议书格式范文
2014/05/14 职场文书
学术会议邀请函
2015/01/30 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
《三国志》赏析
2019/08/27 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
MySQL中日期型单行函数代码详解
2021/06/21 MySQL