利用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 相关文章推荐
Excel数据导入Mysql数据库的实现代码
Jun 05 PHP
PHP批量生成缩略图的代码
Jul 19 PHP
编写安全 PHP应用程序的七个习惯深入分析
Jun 08 PHP
简单的php文件上传(实例)
Oct 27 PHP
thinkphp常见路径用法分析
Dec 02 PHP
ThinkPHP连接数据库的方式汇总
Dec 05 PHP
php字符串按照单词进行反转的方法
Mar 14 PHP
Thinkphp事务操作实例(推荐)
Apr 01 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
May 05 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
Feb 27 PHP
php操作redis命令及代码实例大全
Nov 19 PHP
PHP7 windows支持
Mar 09 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处理斐波那契数列非递归方法
2012/02/04 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
vue实现搜索功能
2019/05/28 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
python zip文件 压缩
2008/12/24 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
python生成圆形图片的方法
2020/03/25 Python
python pygame实现2048游戏
2018/11/20 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
如何在Python对Excel进行读取
2020/06/04 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
大学学风建设方案
2014/05/04 职场文书
某某同志考察材料
2014/05/28 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
先进个人评语大全
2015/01/04 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android