隨著互聯網的發展,越來越多的網站需要與服務器進行數據交互。當用戶提交表單或者點擊按鈕時,后臺需要實時獲取數據并返回響應,這就需要ajax和PHP同步來實現。
比如我們考慮一個網頁上有一個搜索框,用戶在搜索框中輸入關鍵字后點擊搜索按鈕,此后網頁應該及時地跳轉到搜索結果頁面,展示與關鍵字相匹配的數據。這個過程中,需要用到ajax和PHP同步來處理請求和響應。
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "search.php", success: function(result){
$("div").html(result);
}});
});
});
上面的代碼展示了一個用jquery來調用ajax的例子。點擊頁面上按鈕后,代碼會跑到search.php頁面,執行相應的PHP代碼來操作服務器數據,并返回一個結果。此后,javascript會將結果展示在頁面的div標簽內,實現了同步更新頁面數據的功能。
接下來我們從具體實現的角度來看一下如何利用ajax和PHP同步實現數據交互。首先需要在網頁中嵌入一個ajax的js文件,比如jquery。這里我們以jquery的方式來實現。為了方便起見,我們也假設用戶想要查詢商品的情況,數據存在一個名為product_table的數據庫表中,用戶搜索關鍵字在名為search_box的表單內輸入。
$(document).ready(function(){
$(“#search_box”).keyup(function(){
var input_data = $(this).val();
if (input_data.length >0) {
$.ajax({
type: "POST",
url: "search.php",
data:{ keyword: input_data},
success: function(msg){
$(“#search_results”).html(msg);
}
});
}
});
});
上面的代碼分別表示:
$(“#search_box”).keyup(function()
當用戶在搜索框內輸入時,js會檢測輸入內容的長度是否大于0,如果大于0則開始ajax請求。
var input_data = $(this).val();
js從輸入框中獲取用戶輸入數據并存入input_data變量中。
data:{ keyword: input_data}
定義一鍵值對數據,將用戶輸入數據input_data以keyword為名存放。
$(“#search_results”).html(msg);
將ajax請求傳回的msg數據展示在搜索結果頁面的id為search_results的html標簽中。
<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head><body>
<h1>商品搜索</h1>
<form action="search.php" id="search-form"/>
<input type="text" id="search_box" name="search_box"><br />
<div id="search_results"></div>
</body></html>
上述代碼展示了網頁結構及標簽的示例。在form標簽中,我們設定action為search.php,當用戶在搜索框中點擊搜索按鈕時會通過該表單將數據傳輸至服務器端的search.php進行處理。
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db( 'product_table' );
$sql = 'SELECT name, price FROM products WHERE name LIKE "%'.$_POST['keyword'].'%"';
$result = mysql_query($sql);
if(! $result )
{
die('無法查詢: ' . mysql_error());
}
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "".$row['name']." ".$row['price']." ";
}
mysql_close($conn);
?>
上述PHP代碼展示了服務器端的實現,其中通過mysql連接數據庫并進行商品查詢。在查詢的過程中,只返回名稱和價格的數據,方便進行展示。在查詢結束后,通過echo方式返回數據至前端,并由js將數據展示至頁面。
我們上面提到了如何使用ajax和PHP同步實現網頁數據交互。實質上,這并不僅僅用于搜索功能。在日常使用中,很多網站都采用了類似的技術來進行數據更新、文件上傳、用戶反饋等功能的實現。稍加編程能力,任何有想法的人都可以實現自己的網站功能,成為技術實現這個世界的締造者。