使用Ajax向PHP服务端发送请求并返回JSON数据

功能说明：前台通过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;//说明没有受到影响的行
			}
		}
	}	
}

?>

使用Ajax向PHP服务端发送请求并返回JSON数据

猜你喜欢