利用ajax+php实现商品价格计算


Posted in PHP onMarch 31, 2021

本文实例为大家分享了商品价格计算的具体代码,利用ajax和php实现以下页面

利用ajax+php实现商品价格计算

index.php

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <title>商品价格计算</title>
 <style type="text/css">
 table {
  border-collapse: collapse;
 }

 tr {
  text-align: center;
 }

 .a4 {
  text-align: right;

  /* padding-right: 15px; */
 }

 #myDiv {
  color: red;
 }

 input {
  border: 0;
 }
 </style>
</head>

<body>
 <form action="data.php" method="get">
 <table border="1" bordercolor="#00CCCC" cellpadding="20">
  <tr>
  <th>商品名称</th>
  <th>购买数量(斤)</th>
  <th>商品价格(元/斤)</th>
  </tr>
  <tr>
  <td>香蕉</td>
  <td><input type="text" name="a1" value="0" id="n1" onchange="zongji()" /></td>
  <td>8</td>
  </tr>
  <tr>
  <td>苹果</td>
  <td><input type="text" name="a2" value="0" id="n2" onchange="zongji()" /></td>
  <td>5</td>
  </tr>
  <tr>
  <td>橘子</td>
  <td><input type="text" name="a3" value="0" id="n3" onchange="zongji()" /></td>
  <td>7</td>
  </tr>
  <tr>
  <td colspan="3" class="a4">商品折扣:<span>0.8</span></td>
  </tr>
  <tr>
  <td colspan="3" class="a4">
   <div id="jiage">打折后购买商品总价格: 元</div>
  </td>
  </tr>
 </table>


 </form>


 <script>
 function zongji() {
  var b1 = document.getElementById("n1").value;
  var b2 = document.getElementById("n2").value;
  var b3 = document.getElementById("n3").value;
  //1.创建对象
  var xmlhttp;
  if (window.XMLHttpRequest) {
  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xmlhttp = new XMLHttpRequest();
  } else {
  // IE6, IE5 浏览器执行代码
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //2.判断对象是否准备就绪
  xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   document.getElementById("jiage").innerHTML = xmlhttp.responseText;
  }
  };
  //3.发出请求
  xmlhttp.open(
  "GET",
  "demo.php?c1=" + b1 + "&c2=" + b2 + "&c3=" + b3,
  true
  );
  xmlhttp.send();
 }
 </script>
</body>

</html>

data.php

<p>
 <?php
 $d1 = $_GET["c1"];
 $d2 = $_GET["c2"];
 $d3 = $_GET["c3"];
 $sum = (intval($d1) * 8 + intval($d2) * +intval($d3) * 7) * 0.8;
 // $sum=$a1*7.99+$a2*6.89+$a3*3.99;
 echo "打折后购买商品总价格: $sum 元";
 ?>
</p>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
PHP 采集程序 常用函数
Dec 18 PHP
PHP 金额数字转换成英文
May 06 PHP
Windows7下PHP开发环境安装配置图文方法
May 20 PHP
PHP 类相关函数的使用详解
May 10 PHP
深入php函数file_get_contents超时处理的方法详解
Jun 03 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
Jul 08 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
Jan 30 PHP
PHP转盘抽奖接口实例
Feb 09 PHP
Opcache导致php-fpm崩溃nginx返回502
Mar 02 PHP
php合并数组并保留键值的实现方法
Mar 12 PHP
php微信开发之图片回复功能
Jun 14 PHP
CI框架简单分页类用法示例
Jun 06 PHP
php微信小程序解包过程实例详解
Mar 31 #PHP
ThinkPHP5和ThinkPHP6的区别
Mar 31 #PHP
PHP基本语法
PHP中->和=>的意思
Mar 31 #PHP
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
Laravel中Kafka的使用详解
Mar 24 #PHP
thinkphp5 redis缓存新增方法实例讲解
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
PHP音乐采集(部分代码)
2007/02/14 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
详解js异步文件加载器
2016/01/24 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
简短的公司员工自我评价分享
2013/11/13 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
美国留学经济担保书
2014/05/20 职场文书
药剂专业求职信
2014/06/20 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
实施意见格式范本
2015/06/05 职场文书
小学思想品德教学反思
2016/02/24 职场文书
vue使用element-ui按需引入
2022/05/20 Vue.js