jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

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

服务端PHP读取MYSQL数据，并转换成JSON数据，传递给前端Javascript，并操作JSON数据。本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识，并能熟练运用。

XHTML

<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的操作可以查看本站收集的文章：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;

好了，本文的全部叙述就到此结束了，欲了解更多有关jquery ajax json方面的知识请登录我们(www.jb51.net)网站了解详情。

赞 (0)

相关推荐

  • phpmailer在服务器上不能正常发送邮件的解决办法

    phpmailer本身是一个很不错的开源邮件类,也非常的易用简单,就是偶尔会出现程序上传到服务器上不能发送邮件的情况,在之前也有同学问过我这个问题,当时的时候总是不以为然,今天终于让我碰上了,用phpmailer 在本地测试正常,上传到服务器上就不行了,当然了是用的SMTP方式,最终确定是fsockopen 函数惹的祸,因为安全原因fsockopen 和pfsockopen 经常被服务器端关闭.解决方法如下: 而代之的应该是 stream_socket_client()函数,不过他的参数有一点不

  • php输入流php://input使用示例(php发送图片流到服务器)

    从官网信息来看,php://input是一个只读信息流,当请求方式是post的,并且enctype不等于"multipart/form-data"时,可以使用php://input来获取原始请求的数据. 看一个简单的例子. 客户端就是一个表单,非常简单. 复制代码 代码如下: <form action="" method="POST">    name: <input type="text" name=&qu

  • 关于PHP定时发送服务的解决办法

    一.定时发送任务解析 在进行手机APP或者微信开发的时候,经常会有需要定时推送消息的场景. 定时发送又分为两种: 一种是在开发的时候固定时间,后台管理人员只能选择将要推送的消息: 另一种是后台管理人员可以自由选择推送的时间和消息: 二.解决方案 PHP本身是不支持定时发送的,因为PHP是一个脚本语言.在大多数情况下,浏览器关闭,PHP也就不执行了.大部分情况下都依赖于外部的一些小东西. 1.固定时间 大多数服务器系统都是windows或linux. linux:使用CronTab定时执行php

  • 使用PHP免费发送定时短信的实例

    使用PHP免费发送定时短信的实例

    由于飞信目前没有开发平台,现有API都是第三方开发,貌似是通过破解WAP飞信或者3G飞信,模拟浏览器的行为来发短信.另外Google code上有开源的php飞信发送类php-fetion.这些飞信接口方便了定时短信的开发. 背景:老妈年纪大了,文化程度不高,但是需要每天了解天气信息才能下地工作,也就无法通过网络获取天气,只能通过电视.于是寻思着自己抓取网络上的天气信息,通过手机短信发送给老妈. 问题:自己不可能每天定时给老妈发送天气短信,现有的天气预报订阅短信又是要钱的. 解决: 免费发送短信

  • php mailer类调用远程SMTP服务器发送邮件实现方法

    本文实例讲述了php mailer类调用远程SMTP服务器发送邮件实现方法.分享给大家供大家参考,具体如下: php mailer 是一款很好用的php电子邮件发送类模块,可以调用本地的smtp发送电子邮件,也可以调用远程的smtp发送电子邮件,但是使用时需要注意一些事项,否则就会造成发送失败,或者根本不能调用的情况,本文就我在使用这个类时,遇到的问题和解决办法进行展开,简要说明一下php mailer的用法,及注意事项. 首先下载phpmailer类库文件,在这里下载,只需一个资源分. 下载地

  • Linux服务器下PHPMailer发送邮件失败的问题解决

    Linux服务器下PHPMailer发送邮件失败的问题解决

    需求 更换服务器之后,我发现我的发送邮件功能失效了!原来的服务器是可以的,一定是哪里出问题了,决定来排查一下.我是用的PHPMailer,SMTP方式发送邮件的. 排查过程 这种方式首先PHP要开启sockets拓展,查了一下phpinfo页面,是开启的: 看了一下openssl也是开启(因为拿了qq邮箱来测),所以没问题: 那就再看一下allow_url_fopen,开启的,没问题: 是不是禁用了函数?没有禁用,没问题: 那配置上就没有问题了,我就想,是不是端口被占用了? 运行一下:netst

  • jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用. 服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据.阅读本文的读者应该具备jQuery.Ajax.PHP相关知识,并能熟练运用. XHTML <ul id="use

  • jquery的ajax异步请求接收返回json数据实例

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

  • jQuery中ajax请求后台返回json数据并渲染HTML的方法

    html实例 <table border="0" class="restaurant_food" cellspacing="0" cellpadding="1"> <input type="text" name="dishes" value="" class="seek_product" placeholder="请输入

  • Springmvc处理ajax请求并返回json数据

    ①在springmvc方法上添加@ResponseBody注解,springmvc会将数据转换成json并返回: @ResponseBody //指定返回json数据,不跳转页面 @RequestMapping("/list") public List<User> list(User user){ System.out.println("获取到异步请求数据:"+user); //todo 根据条件做数据库查询,返回结果集合 ArrayList<Us

  • Jquery通过ajax请求NodeJS返回json数据实例

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便. 2.通过HTML的ajax请求,可以实现在不同的服务器上,可跨域获取数据. 3.通信数据格式灵活,可以是xml.json.binary等,数据适合任何平台. 在说说我的环境,我使用的是公司提供的电脑,有很多限制,比如是域中电脑,操作权限低,无法安装任何软件,无法修改计算机配置,无法使用U盘等等.

  • jQuery通过Ajax返回JSON数据

    服务端PHP读取MYSQL数据,并转换成JSON数据,传递给前端Javascript,并操作JSON数据.本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. <ul id="userlist"> <li><a hre

  • jQuery实现ajax调用WCF服务的方法(附带demo下载)

    本文实例讲述了jQuery实现ajax调用WCF服务的方法.分享给大家供大家参考,具体如下: 关于AJAX调用WCF服务分为跨域和不跨域两种方式,今天咱们先介绍下不跨域下的调用方法.DEMO是在VS2008写的. 经过测试与研究,发现AJAX调用WCF服务必须满足以下条件 1.wcf的通讯方式必须使用webHttpBinding 2.必须设置<endpointBehaviors>节点的值 3.服务的实现必须添加标记 复制代码 代码如下: [AspNetCompatibilityRequirem

  • 详解Java向服务端发送文件的方法

    详解Java向服务端发送文件的方法

    本文实例为大家分享了Java向服务端发送文件的方法,供大家参考,具体内容如下 /* *给服务端发送文件,主要是IO流. */ import java.io.*; import java.net.*; class send2 { public static void main(String[] args) throws Exception { Socket s = new Socket("192.168.33.1",10005);//建立服务 BufferedReader bufr =

  • CentOS Rsync服务端与Windows cwRsync客户端实现数据同步配置方法

    说明: 1.Rsync服务端 系统:CentOS 5.5 IP地址:192.168.21.160 数据存放目录:/data/osyunwei 2.cwRsync客户端 系统:Windows Server 2003 IP地址:192.168.21.130 同步的目录:D:\osyunwei 实现目的: cwRsync客户端每天凌晨3:00钟自动同步Rsync服务端/data/osyunwei目录中的数据到D:\osyunwei目录 一.Rsync服务端配置 1.关闭SELINUX vi /etc/

  • 服务端nodejs抓取jsonp接口数据实现示例

    目录 前言 方法思路 Node环境动态执行脚本 eval() Function vm.runInThisContext (推荐) 完整代码实现 前言 众所周知,jsonp 接口返回的是一段 js 脚本,在浏览器中使用 script 标签引入.加载成功后,会直接执行其中的 callback 方法,以参数的形象直接返回真正有用的接口数据,以此达到跨域请求的目的.但是如果在非浏览器环境(node执行环境)中怎么来抓取呢,本文就主要介绍一下,服务端nodejs抓取jsonp接口数据 的思路方法和踩过的坑

随机推荐