利用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维护文件系统
Oct 09 PHP
php生成二维码时出现中文乱码的解决方法
Dec 18 PHP
php校验表单检测字段是否为空的方法
Mar 20 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
Apr 17 PHP
使用PHP编写发红包程序
Jul 22 PHP
注释PHP和html混合代码的小技巧(分享)
Nov 03 PHP
YII框架中搜索分页jQuery写法详解
Dec 19 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
Mar 08 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
Apr 16 PHP
laravel框架的安装与路由实例分析
Oct 11 PHP
Laravel定时任务的每秒执行代码
Oct 22 PHP
Yii 框架入口脚本示例分析
May 19 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遍历目录并返回统计目录大小
2014/06/09 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
jQuery入门知识简介
2010/03/04 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
用js实现放大镜效果
2020/10/28 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python中List的sort方法指南
2014/09/01 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
编辑个人求职信范文
2013/09/21 职场文书
经典的班主任推荐信
2013/10/28 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
教师节倡议书
2014/08/30 职场文书
校本研修个人总结
2015/02/28 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
投资入股协议书
2016/03/22 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
pandas进行数据输入和输出的方法详解
2022/03/23 Python
如何基于python实现单目三维重建详解
2022/06/25 Python