利用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模板的朋友必看的很多个顶级PHP模板引擎比较分析
May 26 PHP
PHP投票系统防刷票判断流程分析
Feb 04 PHP
Zend Framework页面缓存实例
Jun 25 PHP
PHP常用的排序和查找算法
Aug 06 PHP
php冒泡排序与快速排序实例详解
Dec 07 PHP
twig里使用js变量的方法
Feb 05 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
Mar 21 PHP
CI框架整合widget(页面格局)的方法
May 17 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
Nov 20 PHP
PHP设计模式之装饰器模式定义与用法简单示例
Aug 13 PHP
laravel框架实现去掉URL中index.php的方法
Oct 12 PHP
PHP使用非对称加密算法RSA
Apr 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php 地区分类排序算法
2013/07/01 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
电气工程自动化求职信
2014/03/14 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
项目转让协议书
2014/10/27 职场文书
介绍信范文大全
2015/05/07 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android