简介：在电商网站搭建过程中，前端经常会向后端请求数据，有时候通过HTML、JS和PHP文件的处理来实现数据的连通。通常情况下，用户在HTML中做关键字操作，JS对提交的表单进行数据处理，向后端发起ajax请求对应PHP的api接口 ...
|
在电商网站搭建过程中，前端经常会向后端请求数据，有时候通过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。 本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.rzxsoft.cn学习互联网营销技术请到巅云建站www.rzxsoft.cn。 |
