利用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网站在线人数统计
Apr 09 PHP
PHP 表单提交给自己
Jul 24 PHP
php 传值赋值与引用赋值的区别
Dec 29 PHP
PHP简洁函数(PHP简单明了函数语法)
Jun 10 PHP
Win下如何安装PHP的APC拓展
Aug 07 PHP
2个比较经典的PHP加密解密函数分享
Jul 01 PHP
Codeigniter实现发送带附件的邮件
Mar 19 PHP
discuz图片顺序混乱解决方案
Jul 29 PHP
PHP常用的小程序代码段
Nov 14 PHP
PHP实现文件上传功能实例代码
May 18 PHP
php和asp语法上的区别总结
May 12 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
Aug 03 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php简单的会话类代码
2011/08/08 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php实现网站顶踩功能的完整前端代码
2015/07/19 PHP
php unlink()函数使用教程
2018/07/12 PHP
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
Angular1.x复杂指令实例详解
2017/03/01 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
JSON Web Tokens的实现原理
2017/04/02 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
浅析Python的命名空间与作用域
2020/11/25 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
个人年底工作总结
2015/03/10 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书