利用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正则校验用户名介绍
Jul 19 PHP
Apache服务器无法使用的解决方法
May 08 PHP
基于PHP magic_quotes_gpc的使用方法详解
Jun 24 PHP
PHP资源管理框架Assetic简介
Jun 12 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
Jul 01 PHP
浅析php原型模式
Nov 25 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
Dec 09 PHP
PHP实现微信网页授权开发教程
Jan 19 PHP
php断点续传之文件分割合并详解
Dec 13 PHP
微信公众号开发之通过接口删除菜单
Feb 20 PHP
PHP+jQuery实现双击修改table表格功能示例
Feb 21 PHP
tp5框架使用cookie加密算法实现登录功能示例
Feb 10 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
用PHP+MySql编写聊天室
2006/10/09 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
js获取视频时长代码
2014/04/10 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python算法学习之计数排序实例
2013/12/18 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python实现随机漫步功能
2018/07/09 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
详解python读取image
2019/04/03 Python
django云端留言板实例详解
2019/07/22 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
html实现弹窗的实例
2021/06/09 HTML / CSS
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS