在電商網站搭建過程中，前端經常會向後端請求資料，有時候通過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());
// 關閉連接配接
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);
else { // 查找失敗，傳回資訊"查找失敗"，res_code值設為0
$arr = array("res_code"=>0, "res_message"=>"查找失敗" . mysql_error());
關于php文法的說明：
mysql_query() 函數執行某個針對資料庫的查詢，每次查詢結果僅有一條資料。
mysql_fetch_row() 從和結果辨別 data 關聯的結果集中取得一行資料并作為數組傳回。每個結果的列儲存在一個數組的單元中，偏移量從 0 開始。依次調用 mysql_fetch_row() 将傳回結果集中的下一行，如果沒有更多行則傳回 false。
轉載于:https://blog.51cto.com/14071672/2351459