·  阅读

在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML、JS和PHP文件的处理来实现数据的连通。通常情况下,用户在HTML中做关键字操作,JS对提交的表单进行数据处理,向后端发起ajax请求对应PHP的api接口,PHP在接收到数据后对连接服务器,服务器再通过PHP中的SQL语句对数据库关键字进行处理返回给PHP,再由PHP返回给前端,前端通过JS处理将数据渲染在HTML中,最终呈现给用户。图1为数据传输流程图:

1d1d0094adf84bacbaef2383d7bacc6d.png

图1 HTML、JS与PHP之间的数据传输流程图

以加入商品到购物车为例,本例为模拟数据,和实际的数据库的数据不同。

7760d982f4af4ab587ae719193a6bd39.png

图2 商品列表

加入购物车的点击事件大致步骤为:用户点击“加入购物车”按钮==>页面获取当前商品唯一值(如商品ID:productID)==>JS处理点击事件,将唯一值连同用户信息通过ajax请求传送给PHP===>PHP向服务器请求连接===>数据库语句执行===>服务器将执行结果返回给PHP===>PHP将执行结果传送给前端。

如果数据库语句执行成功,那么数据库中该用户的购物车表就多了一项刚加入的商品数据,同时服务器也会向PHP返回执行成功信息(及一条不为空的数据串),而用户的界面就会显示“成功加入购物车”等字样(如图1-1所示);若执行失败,也会将失败信息(err)传给PHP,用户界面也会显示相应的提示,如图3所示。

e9058c05cb4e4df79efdb6f8f1877717.png

图3 成功加入购物车提示

1.HTML中的代码实例,商品列表信息通过引入art-template模块进行渲染,代码如下

ec464791d54c4048ac8bd44e24f211c3.png


2.JS中的数据请求处理实例如下,加入购物车的请求的api文件路径为http://localhost/api/add.php,此时将点击加入的商品ID及操作的用户ID封装为对象,用ajax的post请求传给服务端

5cb6dfaaeaae4151bd710bf9531ad04c.png

3.PHP中的代码(及JS中所请求的add.php文件)

2052ac1dc40a4fb4a549fb4d170ed199.png

1a5fdedc55cf4e7e84c2b9ce797bb9ed.png

4.当用户进入购物车时,页面要请求该用户在数据库中的购物车表cartList,此时查询结果应该为一个数组,数组里的每一个子元素对应一个唯一的商品对象,数据库查询语句如下:

c15ad74f31724b99b11a5bc5fb366c06.png

关于PHP语法的说明:

mysql_query() 函数执行某个针对数据库的查询,每次查询结果仅有一条数据。

mysql_fetch_row()