千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 >  html5视频教程  >  HTML、JS与PHP之间的数据传输

HTML、JS与PHP之间的数据传输

时间:2018-08-27 16:29     来源:千锋教育 作者:千锋HTML5

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

图片1

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

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

图片2

  图2 商品列表

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

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

图片3

  图3 成功加入购物车提示

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

  

  {{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。

  学习HTML5,可以参考千锋提供的HTML5学习路线,该学习路线对从零基础小白到web前端初级开发工程师,web前端高级开发工程师,后面的web前端大神级开发工程师都有一个明确清晰的指导,根据千锋提供的HTML5学习路线图结合千锋HTML5视频教程可以让你对学习HTML5前端开发需要掌握的知识有个清晰的了解,并快速入门web前端开发。

  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 广州校区地址:广州市天河区元岗路200号慧通产业园B9三层
    咨询电话:020-38035223 020-38035220
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、360网络安全、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    杭州龙驰校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层
    咨询电话:400-811-9990 0571-86893632/0571-86094032
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算+信息安全培训、全栈软件测试培训、大数据+人工智能培训、物联网+嵌入式培训、Unity游戏开发培训、区块链、PHP全栈+服务器集群培训、网络安全、红帽RHCE认证、好程序员
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱