在電商網(wǎng)站搭建過(guò)程中，前端經(jīng)常會(huì)向后端請(qǐng)求數(shù)據(jù)，有時(shí)候通過(guò)HTML、JS和PHP文件的處理來(lái)實(shí)現(xiàn)數(shù)據(jù)的連通。通常情況下，用戶在HTML中做關(guān)鍵字操作，JS對(duì)提交的表單進(jìn)行數(shù)據(jù)處理，向后端發(fā)起ajax請(qǐng)求對(duì)應(yīng)PHP的api接口，PHP在接收到數(shù)據(jù)后對(duì)連接服務(wù)器，服務(wù)器再通過(guò)PHP中的SQL語(yǔ)句對(duì)數(shù)據(jù)庫(kù)關(guān)鍵字進(jìn)行處理返回給PHP，再由PHP返回給前端，前端通過(guò)JS處理將數(shù)據(jù)渲染在HTML中，最終呈現(xiàn)給用戶。圖1為數(shù)據(jù)傳輸流程圖：

圖1 HTML、JS與PHP之間的數(shù)據(jù)傳輸流程圖

以加入商品到購(gòu)物車為例，本例為模擬數(shù)據(jù)，和實(shí)際的數(shù)據(jù)庫(kù)的數(shù)據(jù)不同。

圖2 商品列表

加入購(gòu)物車的點(diǎn)擊事件大致步驟為：用戶點(diǎn)擊"加入購(gòu)物車"按鈕==>頁(yè)面獲取當(dāng)前商品唯一值(如商品ID：productID)==>JS處理點(diǎn)擊事件，將唯一值連同用戶信息通過(guò)ajax請(qǐng)求傳送給PHP===>PHP向服務(wù)器請(qǐng)求連接===>數(shù)據(jù)庫(kù)語(yǔ)句執(zhí)行===>服務(wù)器將執(zhí)行結(jié)果返回給PHP===>PHP將執(zhí)行結(jié)果傳送給前端。

如果數(shù)據(jù)庫(kù)語(yǔ)句執(zhí)行成功，那么數(shù)據(jù)庫(kù)中該用戶的購(gòu)物車表就多了一項(xiàng)剛加入的商品數(shù)據(jù)，同時(shí)服務(wù)器也會(huì)向PHP返回執(zhí)行成功信息(及一條不為空的數(shù)據(jù)串)，而用戶的界面就會(huì)顯示"成功加入購(gòu)物車"等字樣(如圖1-1所示)；若執(zhí)行失敗，也會(huì)將失敗信息(err)傳給PHP，用戶界面也會(huì)顯示相應(yīng)的提示，如圖3所示。

圖3 成功加入購(gòu)物車提示

1. HTML中的代碼實(shí)例，商品列表信息通過(guò)引入art-template模塊進(jìn)行渲染，代碼如下

{{each product prod}}

{{prod.title}}

￥{{prod.price}}

加入購(gòu)物車

{{/each}}

2. JS中的數(shù)據(jù)請(qǐng)求處理實(shí)例如下,加入購(gòu)物車的請(qǐng)求的api文件路徑為http://localhost/api/add.php，此時(shí)將點(diǎn)擊加入的商品ID及操作的用戶ID封裝為對(duì)象，用ajax的post請(qǐng)求傳給服務(wù)端

$(".productContainer").on("click", ".add", function () {

var productID=$("#prodID").val()；//獲取到當(dāng)前商品的ID值

$.post("http://localhost/api/add.php", {productID:productID,userID},

function (data) {

if (data.res_code === 1) { //返回的數(shù)據(jù)中，data.res_code為1表示加入成功

alert("加入成功");//對(duì)用戶進(jìn)行加入成功提示

} else {

alert(data.res_message);//若不為1則表示加入失敗，data.res_message為失敗信息

}

}, "json");

});

3. PHP中的代碼(及JS中所請(qǐng)求的add.php文件)

// CORS跨域

header("Access-Control-Allow-Origin:*");

/* 向購(gòu)物車添加商品 */

$productID = $_POST["productID"];

$userid = $_POST["userID"];

// 連接數(shù)據(jù)庫(kù)服務(wù)器

mysql_connect("localhost:3306", "root", "");

// 選擇連接數(shù)據(jù)庫(kù)的名稱

mysql_select_db("cart");

// 讀寫庫(kù)編碼

mysql_query("set character set utf8");

mysql_query("set names utf8");

// 編寫SQL語(yǔ)句

//若該用戶未添加該商品,則向cartList表插入該商品,并將數(shù)量置為1

$sql1 = "INSERT INTO cartList(productID, userID,count) VALUES ('$productID', '$userID',1)";

//若該用戶已添加該商品,再次添加時(shí)只在cartList表中讓該商品的數(shù)量+1

$sql2 = "UPDATE cartList SET count=count+1 WHERE productID= '$productID' AND userid='$userID'";

// 執(zhí)行SQL語(yǔ)句，首先執(zhí)行sql1的語(yǔ)句，如果表中有相同的數(shù)據(jù)，則sql1會(huì)執(zhí)行失敗，那么執(zhí)行sql2

$result = mysql_query($sql1);

if(!$result){

$result = mysql_query($sql2);

}

// 判斷

if ($result) { // 執(zhí)行成功，將res_code的值設(shè)為1，并將返回信息設(shè)置為"加入成功"

$arr = array("res_code"=>1, "res_message"=>"加入成功");

echo json_encode($arr);

} else { // 執(zhí)行失敗，則將res_code設(shè)為0，并將錯(cuò)誤信息設(shè)置為"加入失敗"

$arr = array("res_code"=>0, "res_message"=>"加入失敗" . mysql_error());

echo json_encode($arr);

}

// 關(guān)閉連接

mysql_close();

?>

4. 當(dāng)用戶進(jìn)入購(gòu)物車時(shí)，頁(yè)面要請(qǐng)求該用戶在數(shù)據(jù)庫(kù)中的購(gòu)物車表cartList，此時(shí)查詢結(jié)果應(yīng)該為一個(gè)數(shù)組，數(shù)組里的每一個(gè)子元素對(duì)應(yīng)一個(gè)唯一的商品對(duì)象，數(shù)據(jù)庫(kù)查詢語(yǔ)句如下：

// 編寫SQL語(yǔ)句

//在購(gòu)物車cartList表中找到該用戶已經(jīng)添加的購(gòu)物車商品數(shù)據(jù)的信息

$sql = "SELECT * FROM cartList WHERE userID='$userID'";

// 執(zhí)行SQL語(yǔ)句

$result = mysql_query($sql);

// 新建一個(gè)數(shù)組用來(lái)存查詢出來(lái)的結(jié)果，每條結(jié)果僅有一條商品的信息

$results = array();

// 每次查詢成功,將當(dāng)前查詢到的商品結(jié)果存入results數(shù)組中

while($row = mysql_fetch_row($result))

{

$results[] = $row;

}

if ($results) {//返回?cái)?shù)組$results，res_code值設(shè)為1

$arr = array("res_code"=>1, "res_message"=>$results);

echo json_encode($arr);

}

else { // 查找失敗，返回信息"查找失敗"，res_code值設(shè)為0

$arr = array("res_code"=>0, "res_message"=>"查找失敗" . mysql_error());

echo json_encode($arr);

}

關(guān)于PHP語(yǔ)法的說(shuō)明：

mysql_query() 函數(shù)執(zhí)行某個(gè)針對(duì)數(shù)據(jù)庫(kù)的查詢，每次查詢結(jié)果僅有一條數(shù)據(jù)。

mysql_fetch_row() 從和結(jié)果標(biāo)識(shí) data 關(guān)聯(lián)的結(jié)果集中取得一行數(shù)據(jù)并作為數(shù)組返回。每個(gè)結(jié)果的列儲(chǔ)存在一個(gè)數(shù)組的單元中，偏移量從 0 開(kāi)始。依次調(diào)用 mysql_fetch_row() 將返回結(jié)果集中的下一行，如果沒(méi)有更多行則返回 FALSE。

總結(jié)

以上是生活随笔為你收集整理的html传输php连接mysql数据库_解析HTML、JS与PHP之间的数据传输的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。