首页 > 编程语言 >HTML、JS与PHP之间的数据传输

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

时间:2023-04-14 13:22:21浏览次数:35  
标签:请求 JS 数据库 购物车 HTML 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模块进行渲染,代码如下

 

 

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

 

 

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

 

 

 

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

 

 

关于PHP语法的说明:

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

mysql_fetch_row() 从和结果标识 data 关联的结果集中取得一行数据并作为数组返回。每个结果的列储存在一个数组的单元中,偏移量从 0 开始。依次调用 mysql_fetch_row() 将返回结果集中的下一行,如果没有更多行则返回 FALSE。

 

标签:请求,JS,数据库,购物车,HTML,PHP
From: https://www.cnblogs.com/qian-fen/p/17318007.html

相关文章

  • 在.NET Core 6.0中,你可以使用自定义 Middleware 来限制 Swagger/index.html 的访问,当
    创建一个自定义Middleware类,例如SwaggerNotFoundMiddleware:publicclassSwaggerNotFoundMiddleware{privatereadonlyRequestDelegate_next;publicSwaggerNotFoundMiddleware(RequestDelegatenext){_next=next;}publicasyncT......
  • Tomcat 5.5部署jsp项目—jsp乱码问题的解决
    1、最基本的乱码问题。这个乱码问题是最简单的乱码问题。一般新会出现。就是页面编码不一致导致的乱码。<%@pagelanguage="java"pageEncoding="UTF-8"%><%@pagecontentType="text/html;charset=iso8859-1"%><html><head><title>中文问题</title><......
  • JSUtil
    ***拷贝地址栏中的url***functioncopyurl(){varIE=false,c=location.href;varj=navigator.userAgent,l=/MSIE([0-9]{1,}[\.0-9]{0,})/.exec(j);if(l&&(l=parseFloat(RegExp.$1))){IE=true}if(IE){clipboardData.setData('Text',c);......
  • JSTL遍历数组,List,Set,Map等集合
    <%int[]ages={1,2,3,4,5};//普通数组,JSTL直接使用JSP赋值表达式来取List<String>names=newLinkedList<String>();//Listnames.add("Biao");names.add("彪");names.add("雷");request.setAttribu......
  • Java_JSTL_extend function tags
    1.createthefunctionclasspackagecn.com.benyoyo.manage.core.common.tools;publicclassElExFuncs{publicstaticintlastIndexOf(Stringtext,StringsearchString){if(text==null)text="";if(searchString==null)searchString="&q......
  • Js_==&===
    首先,==equality等同,===identity恒等。 ==,两边值类型不同的时候,要先进行类型转换,再比较。 ==,不做类型转换,类型不同的一定不等。  下面分别说明: 先说===,这个比较简单。下面的规则用来判断两个值是否===相等: 1、如果类型不同,就[不相等] 2、如果两个都是数值,并且是同一个......
  • PHP站点及mysql常用操作
    1.mysql查询表里面重复数据SELECT*FROM表名xxxxaWHERE((SELECTCOUNT(*)FROM 表名xxxxWHEREtitle=a.title)>1)ORDERBYtitleDESC//查询标题重复文章SELECT*FROM 表名xxxxaWHERE((SELECTCOUNT(*)FROM 表名xxxxWHEREtitle=a.title)>1)andchann......
  • AppSettings.json 配置与获取
    1.第一步在我们的AppSettings.json文件中配置好需要的参数    2.创建一个AppSettingHelp类引用:usingMicrosoft.Extensions.Configuration;usingMicrosoft.Extensions.Configuration.Json;  3.然后我们就可以在Startup中进行调用  stringUrlName=AppSetti......
  • JSP中树状图的代码实现
    需要使用到jquery插件jquery.treeview.js 1、树状结构<ulid="tree"><s:iteratorvalue="#application.topPrivilegeList"><li>${name}<ul><s:iteratorvalue="children"&g......
  • HTML、JS与PHP之间的数据传输
    在电商网站搭建过程中,前端经常会向后端请求数据,有时候通过HTML、JS和PHP文件的处理来实现数据的连通。通常情况下,用户在HTML中做关键字操作,JS对提交的表单进行数据处理,向后端发起ajax请求对应PHP的api接口,PHP在接收到数据后对连接服务器,服务器再通过PHP中的SQL语句对数据库关键字进......