研究Jquery和php也有一段時(shí)間了，但是對(duì)兩者深層次方面的整合還不是很精通。Google了N百次了，只能說(shuō)收效甚微，一篇篇轉(zhuǎn)爛了的JQuery和php整合的例子最后可能在你的機(jī)器上還是跑不起來(lái)，別泄氣，這太正常了。我不能不感嘆于那些高手們的懶惰，雖然我只能算的上菜鳥，請(qǐng)?jiān)试S我發(fā)表一下自己的觀點(diǎn)。本來(lái)我的這個(gè)小程序是不敢貼出來(lái)獻(xiàn)丑的，但是鑒于這方面的資料確實(shí)太少，我還是貼出來(lái)吧。希望能給真正需要的人提供一些幫助。麻雀雖小，五臟俱全，也許你能從這個(gè)小程序中悟出來(lái)點(diǎn)什么。
如果下面的例子不能理解，你可能需要補(bǔ)習(xí)一下理論基礎(chǔ)，參見(jiàn)這個(gè)博客：jQuery跨域AJAX。
例子1：這個(gè)例子是JQuery和php不跨域的情況下整合的例子
首先我先敘述一下我的環(huán)境需要，以方便嘗試跑這個(gè)小程序的朋友。你必須有一個(gè)wordpress 2.9系列，因?yàn)槲疫@個(gè)程序中調(diào)用了Wordpress 2.9中的函數(shù)。在Wordpress根目錄下建一個(gè)rpc文件夾，其他的也無(wú)所謂，自己看著改改相應(yīng)的地方就行了。
下一步就把這兩個(gè)文件copy到rpc下邊就行了。其他的不需要任何改動(dòng)，還有一點(diǎn)要提醒的，把jquery-1.4.js復(fù)制到rpc目錄下
1、latest.php文件
<?php
require_once("../wp-config.php");
//$arr = $_POST; //若以$.get()方式發(fā)送數(shù)據(jù)，則要改成$_GET.或者直接用:$_REQUEST
$arr = $_REQUEST['post_num'];
$show_post = "type=postbypost&limit=6"; //該參數(shù)是傳遞給wp_get_archives函數(shù)的，wp_get_archives得到后會(huì)返回指定數(shù)目的日志
echo my_wp_get_archives($show_post);
function my_wp_get_archives($show_post)
{
return wp_get_archives($show_post);
}
?>
2、latest.html文件
<html>
<head>
<title>演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
</head>
<script language="javascript" src="jquery-1.4.js"></script>
<script language="javascript">
$(document).ready(function (){
$('#latest').click(function (){
var post_num=$('#number1').attr('value');
$.post('http://localhost/wordpress/rpc/latest.php?post_num='+post_num,show_post);
});
});
function show_post(res){
//Replace contents of #result with retrieved result
$('#result').html(res);
}
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>日志數(shù):</span><input type="text" name="number1" id="number1" size="15" ></p>
<p><span>日志分類:</span><input type="text" name="category" id="input2" size="15" ></p>
</form>
<button id="latest"> 最新日志 </button>
例子2：JQuery和php跨域的情況下整合的例子
1.client.html(客戶端文件)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script language="javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#latest').click(function (){
var $limit=$('#limit').attr('value');
var $category=$('#category').attr('value');
$.getJSON("http://localhost/wordpress/rpc/server.php?limit="+$limit+"&category="+$category+"&callback=?",
function(data){ // 往后臺(tái)傳遞的參數(shù)
$rpc = "日志鏈接:"+data.link1+"<br> 日志標(biāo)題:"+data.title1;
$('#result').html($rpc); //調(diào)用用來(lái)顯示內(nèi)容的div
})
})
});
</script>
</head>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>日志數(shù):</span><input type="text" name="limit" id="limit" size="15" ></p>
<p><span>日志分類:</span><input type="text" name="category" id="category" size="15" ></p>
</form>
</body>
<button id="latest">最新日志</button>
</html>
2.server.php(用來(lái)處理客戶端發(fā)來(lái)的請(qǐng)求)
<?php
//header('Content-Type: application/json; charset=utf-8');
require_once("../wp-config.php");
$limit=$_REQUEST['limit']; //接收客戶端發(fā)來(lái)的數(shù)據(jù)
$category=$_REQUEST['category'];
$arr=Array();
function my_wp_get_archives($limit)
{
$show_post = "type=postbypost&echo=0&limit=".$limit;
return wp_get_archives($show_post); //調(diào)用wordpress自身的函數(shù)
}
$posts=split('<li>',my_wp_get_archives($limit));
for($start=1;$start<sizeof($posts);$start++)
{
$arr["title".$start]=strip_tags($posts[$start]); //對(duì)從wordpress取到的數(shù)據(jù)進(jìn)行處理，提取出字符串，方便自己加工成Json數(shù)據(jù)
$arr["link".$start]=substr($posts[$start],strpos($posts[$start],'=\'')+2,strpos($posts[$start],'/\'')-8);
}
// var_dump($arr);
$json = json_encode($arr); //用Json_encode函數(shù)處理php的數(shù)組
echo $_GET['callback']."(".$json.")";
?>
注：已經(jīng)說(shuō)明是跨域調(diào)用了，所以這兩個(gè)文件自己要合理放置。我已經(jīng)測(cè)試過(guò)了，絕對(duì)能用
鑒于上面的注釋已經(jīng)很詳細(xì)了，在此不再對(duì)代碼進(jìn)行分析
