在電商網站搭建過程中，前端經常會向後端請求數據，有時候通過HTML、JS和PHP文件的處理來實現數據的連通。通常情況下，用戶在HTML中做關鍵字操作，JS對提交的表單進行數據處理，向後端發起ajax請求對應PHP的api接口，PHP在接收到數據後對連接服務器，服務器再通過PHP中的SQL語句對數據庫關鍵字進行處理返回給PHP，再由PHP返回給前端，前端通過JS處理將數據渲染在HTML中，最終呈現給用戶。圖1爲數據傳輸流程圖：
圖1 HTML、JS與PHP之間的數據傳輸流程圖
以加入商品到購物車爲例，本例爲模擬數據，和實際的數據庫的數據不同。
圖2 商品列表
加入購物車的點擊事件大致步驟爲：用戶點擊"加入購物車"按鈕==>頁面獲取當前商品唯一值（如商品ID：productID）==>JS處理點擊事件，將唯一值連同用戶信息通過ajax請求傳送給PHP===>PHP向服務器請求連接===>數據庫語句執行===>服務器將執行結果返回給PHP===>PHP將執行結果傳送給前端。
如果數據庫語句執行成功，那麼數據庫中該用戶的購物車表就多了一項剛加入的商品數據，同時服務器也會向PHP返回執行成功信息（及一條不爲空的數據串），而用戶的界面就會顯示"成功加入購物車"等字樣（如圖1-1所示）；若執行失敗，也會將失敗信息（err）傳給PHP，用戶界面也會顯示相應的提示，如圖3所示。
圖3 成功加入購物車提示
1. HTML中的代碼實例，商品列表信息通過引入art-template模塊進行渲染，代碼如下
<ul class="productContainer">
{{each product prod}}
<li>
<input type="text" value="{{prod.id}}">
<img src="{{prod.img}}"/>
<p>{{prod.title}}</p>
<span>￥{{prod.price}}</span>
<a href="javascript:void(0)">加入購物車</a>
</li>
{{/each}}
</ul>
2. JS中的數據請求處理實例如下,加入購物車的請求的api文件路徑爲http://localhost/api/add.php，此時將點擊加入的商品ID及操作的用戶ID封裝爲對象，用ajax的post請求傳給服務端
$(".productContainer").on("click", ".add", function () {
var productID=$("#prodID").val()；//獲取到當前商品的ID值
$.post("http://localhost/api/add.php", {productID:productID,userID},
function (data) {
if (data.res_code === 1) { //返回的數據中，data.res_code爲1表示加入成功
alert("加入成功");//對用戶進行加入成功提示
} else {
alert(data.res_message);//若不爲1則表示加入失敗，data.res_message爲失敗信息
}
}, "json");
});
3. PHP中的代碼（及JS中所請求的add.php文件）
<?php
// CORS跨域
header("Access-Control-Allow-Origin:*");
/* 向購物車添加商品 */
$productID = $_POST["productID"];
$userid = $_POST["userID"];
// 連接數據庫服務器
mysql_connect("localhost:3306", "root", "");
// 選擇連接數據庫的名稱
mysql_select_db("cart");
// 讀寫庫編碼
mysql_query("set character set utf8");
mysql_query("set names utf8");
// 編寫SQL語句
//若該用戶未添加該商品,則向cartList表插入該商品,並將數量置爲1
$sql1 = "INSERT INTO cartList(productID, userID,count) VALUES ('$productID', '$userID',1)";
//若該用戶已添加該商品,再次添加時只在cartList表中讓該商品的數量+1
$sql2 = "UPDATE cartList SET count=count+1 WHERE productID= '$productID' AND userid='$userID'";
// 執行SQL語句，首先執行sql1的語句，如果表中有相同的數據，則sql1會執行失敗，那麼執行sql2
$result = mysql_query($sql1);
if(!$result){
$result = mysql_query($sql2);
}
// 判斷
if ($result) { // 執行成功，將res_code的值設爲1，並將返回信息設置爲"加入成功"
$arr = array("res_code"=>1, "res_message"=>"加入成功");
echo json_encode($arr);
} else { // 執行失敗，則將res_code設爲0，並將錯誤信息設置爲"加入失敗"
$arr = array("res_code"=>0, "res_message"=>"加入失敗" . mysql_error());
echo json_encode($arr);
}
// 關閉連接
mysql_close();
?>
4. 當用戶進入購物車時，頁面要請求該用戶在數據庫中的購物車表cartList，此時查詢結果應該爲一個數組，數組裏的每一個子元素對應一個唯一的商品對象，數據庫查詢語句如下：
// 編寫SQL語句
//在購物車cartList表中找到該用戶已經添加的購物車商品數據的信息
$sql = "SELECT * FROM cartList WHERE userID='$userID'";
// 執行SQL語句
$result = mysql_query($sql);
// 新建一個數組用來存查詢出來的結果，每條結果僅有一條商品的信息
$results = array();
// 每次查詢成功,將當前查詢到的商品結果存入results數組中
while($row = mysql_fetch_row($result))
{
$results[] = $row;
}
if ($results) {//返回數組$results，res_code值設爲1
$arr = array("res_code"=>1, "res_message"=>$results);
echo json_encode($arr);
}
else { // 查找失敗，返回信息"查找失敗"，res_code值設爲0
$arr = array("res_code"=>0, "res_message"=>"查找失敗" . mysql_error());
echo json_encode($arr);
}
關於PHP語法的說明：
mysql_query() 函數執行某個針對數據庫的查詢，每次查詢結果僅有一條數據。
mysql_fetch_row() 從和結果標識 data 關聯的結果集中取得一行數據並作爲數組返回。每個結果的列儲存在一個數組的單元中，偏移量從 0 開始。依次調用 mysql_fetch_row() 將返回結果集中的下一行，如果沒有更多行則返回 FALSE。