利用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 $_SERVER详解
Jan 16 PHP
PHP函数常用用法小结
Feb 08 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
May 02 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
Jan 30 PHP
ThinkPHP权限认证Auth实例详解
Jul 22 PHP
php中addslashes函数与sql防注入
Nov 17 PHP
php简单获取文件扩展名的方法
Mar 24 PHP
利用PHP将部分内容用星号替换
Apr 21 PHP
学习php设计模式 php实现享元模式(flyweight)
Dec 07 PHP
php使用file函数、fseek函数读取大文件效率对比分析
Nov 04 PHP
PHP实现通过CURL上传文件功能示例
May 30 PHP
浅谈laravel orm 中的一对多关系 hasMany
Oct 21 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的类 功能齐全的发送邮件类
2006/10/09 PHP
杏林同学录(四)
2006/10/09 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
php cookie 详解使用实例
2016/11/03 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
js性能优化 如何更快速加载你的JavaScript页面
2012/03/17 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
Angular实现form自动布局
2016/01/28 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python随机数random模块使用指南
2016/09/09 Python
Python ldap实现登录实例代码
2016/09/30 Python
python处理csv中的空值方法
2018/06/22 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
个人收入证明范本
2014/01/12 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
领导班子整改方案
2014/10/25 职场文书
2014年司法所工作总结
2014/11/22 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis