服務端PHP讀取MYSQL數(shù)據，并轉換成JSON數(shù)據，傳遞給前端Javascript，并操作(zuò)JSON數(shù)據。本文将通(tōng)過實例演示了jQuery通(tōng)過Ajax向PHP服務端發送請(qǐng)求并返回JSON數(shù)據。閱讀本文的讀者應該具備jQuery、Ajax、PHP相關知識，并能熟練運用。

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據交換格式。易于人(rén)閱讀和(hé)編寫，同時(shí)也易于機器(qì)解析和(hé)生(shēng)成。JSON在前後台交互的過程中發揮着相當出色的作(zuò)用。請(qǐng)接着往下看教程。

XHTML

	
	

		張三
	

	

		李四
	

	

		王五
	




	
	

		姓名：
	

	

		性别：
	

	

		電(diàn)話(huà)：
	

	

		郵箱：
	

實例中，顯示了一個(gè)用戶姓名列表ul#userlist，一個(gè)用戶詳細信息層#info。值得(de)注意的是，我給每個(gè)标簽設置屬性“rel”并賦值，這個(gè)很(hěn)重要，将在jQuery中使用。我要實現的效果就是：當點擊用戶列表中任意用戶的姓名，将即時(shí)顯示出該用戶的詳細信息，如電(diàn)話(huà)、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}

$(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);
       }); 
	});
});

我給用戶列表的每個(gè)标簽都綁定一個(gè)click事件，當單擊用戶姓名時(shí)，執行(xíng)以下操作(zuò)：獲取當前标簽的屬性“rel”的值，并組成一個(gè)數(shù)據串：var data = "action=getlink&id="+hol，接着通(tōng)過ajax向服務端server.php發送JSON請(qǐng)求，得(de)到後台響應後，返回JSON數(shù)據，并将得(de)到的數(shù)據顯示在用戶詳細信息中。

PHP

後台server.php得(de)到前端的Ajax請(qǐng)求後，通(tōng)過傳遞的參數(shù)連接數(shù)據庫并查詢用戶表，将相應的用戶信息轉換成一個(gè)數(shù)組$list，最後将數(shù)組轉換成JSON數(shù)據。關于PHP與JSON的操作(zuò)可(kě)以查看本站(zhàn)收集的文章：PHP中JSON的應用。以下是server.php的詳細代碼，其中數(shù)據連接部分省略，請(qǐng)大(dà)家(jiā)自行(xíng)建立數(shù)據連接。

include_once("connect.php"); //連接數(shù)據庫
$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);
}

通(tōng)過本文可(kě)以知道(dào)jQuery通(tōng)過Ajax向服務端發送JSON請(qǐng)求，使用方法$.getJSON非常方便簡單。并且可(kě)以将服務端返回的數(shù)據進行(xíng)解析，得(de)到相應字段的內(nèi)容，相比像HTML請(qǐng)求返回的一大(dà)串字符串那(nà)樣處理(lǐ)方便快捷。

最後附上(shàng)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;