利用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 04 PHP
php array_map array_multisort 高效处理多维数组排序
Jun 11 PHP
php cout&amp;lt;&amp;lt;的一点看法
Jan 24 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
Nov 07 PHP
图解找出PHP配置文件php.ini的路径的方法
Aug 20 PHP
php文件缓存类汇总
Nov 21 PHP
php判断输入是否是纯数字,英文,汉字的方法
Mar 05 PHP
WordPress迁移时一些常见问题的解决方法整理
Nov 24 PHP
PHP会话控制实例分析
Dec 24 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
Oct 08 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
May 02 PHP
php+mysql实现的无限分类方法类定义与使用示例
May 27 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
jQuery 连续列表实现代码
2009/12/21 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
Django中使用group_by的方法
2015/05/26 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python远程邮件控制电脑升级版
2019/05/23 Python
python实现动态数组的示例代码
2019/07/15 Python
python模块常用用法实例详解
2019/10/17 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
市场营销职业生涯规划书范文
2014/01/12 职场文书
四风对照检查材料范文
2014/09/27 职场文书
教务处教学工作总结
2015/08/10 职场文书
我的中国梦主题班会
2015/08/14 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL