利用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 相关文章推荐
第1次亲密接触PHP5(1)
Oct 09 PHP
模拟OICQ的实现思路和核心程序(三)
Oct 09 PHP
7个超级实用的PHP代码片段
Jul 11 PHP
PHP源码之explode使用说明
Aug 05 PHP
PHP页面间参数传递的四种方法详解
Jun 09 PHP
php 在windows下配置虚拟目录的方法介绍
Jun 26 PHP
php密码生成类实例
Sep 24 PHP
php中实现用数组妩媚地生成要执行的sql语句
Jul 10 PHP
PHP如何将log信息写入服务器中的log文件
Jul 29 PHP
php自定义时间转换函数示例
Dec 07 PHP
PHP strripos函数用法总结
Feb 11 PHP
Laravel基础_关于view共享数据的示例讲解
Oct 14 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
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
[02:27]刀塔重生降临
2015/10/14 DOTA
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
使用TensorFlow实现SVM
2018/09/06 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python实现倒计时小工具
2019/07/29 Python
python创建子类的方法分析
2019/11/28 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
《我为你骄傲》教学反思
2014/02/20 职场文书
行政副总岗位职责
2014/02/23 职场文书
爱护公共设施的标语
2014/06/24 职场文书
家长会欢迎标语
2014/06/24 职场文书
新教师教学工作总结
2015/08/14 职场文书
护理心得体会范文
2016/01/22 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python