功能说明：前台通过AJAX想后台发送请求，后台根据情况将符合条件的一条或多条数据封装进数组中并以JSON的格式返回，前台根据返回数据进行展示。
其他说明：
例子还是用的前一篇提到的“省市数据”，建表和数据所用到的SQL已经上传到附件中。
数据库用的mysql，PHP中用的是mysqli。
代码如下：
1、页面展示：index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AJAX返回JSON格式的数据测试</title> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/css.css" /> <script type="text/javascript" src="js/jquery1.9.0.min.js"></script> </head> <body> <table class="table table-bordered table-hover table-striped" id="tableList" style="table-layout: fixed;"> <tbody> <tr align="center"> <td><strong>序号</strong></td> <td><strong>省</strong></td> <td><strong>市</strong></td> <td><strong>是否显示</strong></td> <td><strong>显示顺序</strong></td> </tr> </tbody> </table> </body> </html>
2、ajax进行请求及响应结果处理：
$(function(){
getInfoForAjax(10);//取id为10的数据
});
/**
* 该方法通过ajax的方式，从后台获取json格式的数据进行返回
* @param id:0-表示取全部值(这里作为例子，只取前10条数据) 其他表示取指定id的值
*/
function getInfoForAjax(id){
$.ajax({
type:"POST",
async:false,
data:{"id":id,"time":new Date().getTime()},
dataType:"json",
url:"services.php",
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert("加载错误，错误原因：\n"+errorThrown);
},
success:function(data){
var html="";
for(var i=0;i<data.length;i++){
html+="<tr align='center'>";
html+="<td>"+data[i].id+"</td>";//序号
html+="<td>"+data[i].provice+"</td>";//省份
html+="<td>"+data[i].city+"</td>";//市
html+="<td>"+data[i].isshow+"</td>";//是否显示
html+="<td>"+data[i].showorder+"</td>";//显示顺序
html+="</tr>";
}
$("#tableList").append(html);
}
});
}
3、后台处理：services.php
<?php
if(isset($_REQUEST['id'])){
$id = $_REQUEST['id'];
if(is_numeric($id)){//是数字
$id = intval($id);
$sql = "";
if($id>0){//说明取指定的值
$sql = "select id,provice,city,isshow,showorder from s_cities where id=".$id.";";
}else{//取全部值(这里作为例子，只取10条数据)
$sql = "select id,provice,city,isshow,showorder from s_cities order by showorder limit 0,10;";
}
require_once 'DB/DBTools.php';
//实例化对象
$dbTools = new DBTools();
$res = $dbTools->execute_dql($sql);
while($row=$res->fetch_array()){
$list[]=array("id"=>$row[0],"provice"=>$row[1],"city"=>$row[2],"isshow"=>$row[3],"showorder"=>$row[4]);
//$list=array("id"=>$row[0],"provice"=>$row[1],"city"=>$row[2],"isshow"=>$row[3],"showorder"=>$row[4]);
}
echo json_encode($list);
}
}
?>
4、数据库操作类：DBTools.php
<?php
class DBTools{
private $mysqli=null;//mysqli对象
private static $host="127.0.0.1";//主机名
private static $user="root";//用户名
private static $pwd="root";//密码
private static $db="test";//数据库
function __construct(){
$this->mysqli=new mysqli(self::$host,self::$user,self::$pwd,self::$db);
if($this->mysqli->connect_error){//连接失败
die("连接失败".$this->mysqli->connect_error);
}
//设置访问数据库的字符集
//保证PHP是以uft8的方式来操作mysql数据库的
$this->mysqli->query("set names utf8");
}
//查询
public function execute_dql($sql){
$res = $this->mysqli->query($sql) or die("操作失败，原因".$this->mysqli->error);
return $res;
}
//添加、修改和删除
public function execute_dml($sql){
$res = $this->mysqli->query($sql) or die("操作失败，原因".$this->mysqli->error);
if(!$res){//说明操作失败
return 0;
}else{
if($this->mysqli->affected_rows>0){
return 1;//说明操作成功
}else{
return 2;//说明没有受到影响的行
}
}
}
}
?>
相关推荐
JSON(JavaScript Object ...本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识，并能熟练运用。 XHTML <li><a>张三</a></li> <li
在列表页的底部有个“更多”链接，通过触发该链接，向服务端发送Ajax请求，后台PHP程序得到请求参数，并作出相应，获取数据库相应的记录并以JSON的形式返回给前台页面，前台页面jQuery解析JSON数据，并将数据追加到...
在列表页的底部有个“更多”链接，通过触发该链接，向服务端发送Ajax请求，后台ASP程序接收请求参数，并作出相应，获取数据库相应的记录并以JSON的形式返回给前台页面，前台页面jQuery解析JSON数据，并将数据追加到...
在列表页的底部有个“更多”链接，通过触发该链接，向服务端发送Ajax请求，后台ASP程序接收请求参数，并作出相应，获取数据库相应的记录并以JSON的形式返回给前台页面，前台页面jQuery解析JSON数据，并将数据追加到...
请求test.php页并发送附加数据(忽略返回值). $.get("test.php", { name: "John", time: "2pm" } );显示从test.php请求的返回值(HTML 或 XML, 根据不同返回值). $.get("test.php", function(data){ alert...
Ajax加载的基本原理：当页面载入时，jQuery向后台请求数据，PHP通过查询数据库将最新的几条记录显示在列表页，在列表页的底部有个“查看更多”的链接，通过触发该链接，向服务端发送Ajax请求，后台PHP程序得到请求...
在列表页的底部有个“更多”链接，通过触发该链接，向服务端发送Ajax请求，后台PHP程序得到请求参数，并作出相应，获取数据库相应的记录并以JSON的形式返回给前台页面，前台页面jQuery解析JSON数据，并将数据追加到...
基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例...query表示当前文本输入框中的字符串，可在该方法中通过ajax向后台请求数据（数组形式的json对象），然后将返回的对象作为process的参数； formatIt
当用户发送第一次请求的时候，验证用户登录，创建一个该qq号和服务器端保持通讯连接得线程，启动该通讯线程，通讯完毕，关闭Scoket。 QQ客户端登录界面，中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...
这个模式主要是这样的：一个请求从客户端发送到服务端，然后服务端渲染一个HTML页面，接着将这个页面返回给客户端。虽然随着AJAX、JSON和大量内置了客户端渲染功能的框架（例如Ember、Angular、Knockout、Backone...
当用户发送第一次请求的时候，验证用户登录，创建一个该qq号和服务器端保持通讯连接得线程，启动该通讯线程，通讯完毕，关闭Scoket。 QQ客户端登录界面，中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...
使用了本控件后，在后台编写代码时，不必编写实时监控文件上传进度的复杂代码，只用编写简单的处理保存上传文件的代码即可，因为FLASH插件会自动帮助算出上传进度，并实时定时给控件提供进度显示数据，这样就减轻了...
再比如ASP.Net内置的AJAX解决方案UpdatePanel只在部分要求不高的内网项目中才被使用，因此我们在讲解UpdatePanel的使用和原理之外，把更多的时间放在讲解企业中用的最多的JQuery AJAX解决方案上。 6、B/S系统项目（7...
Flume 是一个分布式、可靠和高可用的服务，用于收集、聚合以及移动大量日志数据，使用一个简单灵活的架构，就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...
- 加载文件列表改为异步方式,数据返回采用回调函数方式。增强体验 - 选中优化,文件&文件夹重命名、文件&文件夹新建 后自动选中。(f5增加回调。)； - 选中保持,选中后如果调整排序等等,保持选中状态。 - 上传文件...
Flume 是一个分布式、可靠和高可用的服务，用于收集、聚合以及移动大量日志数据，使用一个简单灵活的架构，就流数据模型。这是一个可靠、容错的服务。 彩信发送开发包 apimms apimms 提供了各种语言用来发送彩信...