解析HTML、JS与PHP之间的数据传输
在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过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。
转载于:https://blog.51cto.com/14071672/2351459
解析HTML、JS与PHP之间的数据传输的更多相关文章
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- 深入解析Backbone.js框架的依赖库Underscore.js的作用
这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- Node.js 和 Python之间如何进行选择?
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://dzone.com/articles/nodejs-vs-python-which ...
- 标签页tab.js 在栏目之间切换,局部变化
1.在使用bootstrap 中,我们会用到在栏目之间切换,来刷新页面的局部,可以使用下面的方法 <link rel="stylesheet" href="http ...
- Pako.js压缩解压,vue压缩解压,前后端之间高效数据传输
项目开发中常常会遇到前后端之间有大量数据传输占用带宽导致页面响应慢的问题,这时候我们可以考虑使用Pako.js对信息进行压缩之后传输. 我在前端使用的是vue-element-admin前端框架.框架 ...
- JS多异步之间的协作方案
场景:使用工具函数downloadAllAsync接收一个URL数组并下载所有文件,结果返回一个存储了文件内容的数组,每个URL对应一个字符串. 好处:downloadAllAsync并不只有清理嵌套 ...
- 解析JSON对象与字符串之间的相互转换
在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
随机推荐
- Python机器学习笔记 集成学习总结
集成学习(Ensemble learning)是使用一系列学习器进行学习,并使用某种规则把各个学习结果进行整合,从而获得比单个学习器显著优越的泛化性能.它不是一种单独的机器学习算法啊,而更像是一种优 ...
- GitHub 热点速览 Vol.15:Background-Matting 让你秒变专业抠图师
作者:HelloGitHub-小鱼干 摘要:如果要选一个词来概述上周的热点,春风拂过,应该是一个不错的词.新项目像春天冒出的枝芽,朝气蓬勃,虽然获得的 star 不如之前三维 Vim 抢眼,但胜在多姿 ...
- wireshark抓包实战(二),第一次抓包
1.选择网卡. 因为wireshark是基于网卡进行抓包的,所以这时候我们必须选取一个网卡进行抓包.选择网卡一般有三种方式 (1)第一种 当我们刚打开软件是会自动提醒您选择,例如: (2)第二种 这时 ...
- python3(十一)generator
# 只要把一个列表生成式的[]改成() L = [x * x for x in range(10)] print(L) # [0, 1, 4, 9, 16, 25, 36, 49, 64, 81] g ...
- hive常用函数一
Hive概念 Hive最适合于数据仓库应用程序,使用该应用程序进行相关静态数据分析,不需要快速响应出结果,而数据本身不会发生频繁变化. Hdfs分布式文件系统限制了hive,使其不支持记录级别的更新. ...
- 曹工说Redis源码(6)-- redis server 主循环大体流程解析
文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...
- dubbo(三):负载均衡实现解析
dubbo作为分布式远程调用框架,要保证的点很多,比如:服务注册与发现.故障转移.高性能通信.负载均衡等等! 负载均衡的目的是为了特定场景下,能够将请求合理地平分到各服务实例上,以便发挥所有机器的叠加 ...
- ASE past project:interview & analysis
采访往届ASE课程学员李潇,他所在的团队blog戳这里http://www.cnblogs.com/smart-code/ Q1:师兄你觉得在团队项目中,有哪些需要注意的事情? A1:团队合作吧.首先 ...
- Cobalt Strike系列教程第七章:提权与横向移动
Cobalt Strike系列教程分享如约而至,新关注的小伙伴可以先回顾一下前面的内容: Cobalt Strike系列教程第一章:简介与安装 Cobalt Strike系列教程第二章:Beacon详 ...
- E - Roaming Atcoder
题解:https://blog.csdn.net/qq_40655981/article/details/104459253 题目大意:n个房间,,每个房间都有一个人,一共k天,在一天,一个人可以到任 ...