利用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-03-30

php+ajax实现商品对比功能示例

本文实例讲述了php+ajax实现商品对比功能.分享给大家供大家参考,具体如下: 商品对比调用的JS文件(包含了商品对比框浮动JS): /*浮动窗口*/ (function(){ var n=10; var obj=document.getElementById("goods-compare"); if(!obj){ return false; } var x=0; window.onscroll=function(){ obj.style.top=(document.body.scr

jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法

效果: json文件: { "books":[ {"id":1,"imgUrl":"images/ly.jpg","price":"45.00","title":"论语","publish":"人民文学出版社","num":"303","desc":

妙用Ajax技术实现局部刷新商品数量和总价实例代码

1. 问题的分析 先看一下页面中的情况: 功能如上,在没有Ajax之前,一般都是根据用户修改的值去找Action,然后返回新的jsp页面重新加载整个页面,完成数字的更新.但是有了Ajax技术后,我们可以利用Ajax技术局部刷新要改变的地方,而不是重新加载整个页面.首先看一下上图对应的jsp部分的代码: <div class="section_container"> <!-- 购物车 --> <div id="shopping_cart"

php实现的简单美国商品税计算函数

本文实例讲述了php实现的简单美国商品税计算函数.分享给大家供大家参考.具体如下: <?php function tax($total,$tax_amount){ $tax_rate = $tax_amount * .01; $tax = $total * $tax_rate; return $value = $tax + $total; } $price = 50.00; //In U.S. Dollars $taxrate = 6.5; //In percentage echo "$&

PHP概率计算函数汇总

其实发这篇博感觉并没有什么用,太简单了,会的人不屑看,不会的人自已动动脑子也想到了.但是看着自已的博客已经这么久没更,真心疼~.粗略算下一篇只有代码的水文,会占用OSC至少十几KB的数据库空间呢,但是,一想到乱弹里的然并卵,也就释然了. <?php /** * 概率计算类 * 可用于抽奖等 */ class Probability { /** * 概率统计数据 * thing => chance */ var $data = array(); var $chance_count = 0; fu

javascript图像处理—边缘梯度计算函数

前言 上一篇文章,我们讲解了图像处理中的膨胀和腐蚀函数,这篇文章将做边缘梯度计算函数. 图像的边缘 图像的边缘从数学上是如何表示的呢? 图像的边缘上,邻近的像素值应当显著地改变了.而在数学上,导数是表示改变快慢的一种方法.梯度值的大变预示着图像中内容的显著变化了. 用更加形象的图像来解释,假设我们有一张一维图形.下图中灰度值的"跃升"表示边缘的存在: 使用一阶微分求导我们可以更加清晰的看到边缘"跃升"的存在(这里显示为高峰值): 由此我们可以得出:边缘可以通过定位梯

PHP简单实现欧拉函数Euler功能示例

本文实例讲述了PHP简单实现欧拉函数Euler功能.分享给大家供大家参考,具体如下: 欧拉函数ph(n)的意思是所有小于n且与n互质的个数. 比如说ph(10) = 4{1,3,7,9与10互质} 代码如下: <?php function Euler($x) { $res = $x; $now = 2; while ($x > 1) { if ($x % $now == 0) { $res /= $now; $res *= ($now - 1); while ($x % $now == 0)

java中的数学计算函数的总结

java中的数学计算函数 Math类: java.lang.Math类中包含基本的数字操作,如指数.对数.平方根和三角函数. java.math是一个包,提供用于执行任意精度整数(BigInteger)算法和任意精度小数(BigDecimal)算法的类. java.lang.Math类中包含E和PI两个静态常量,以及进行科学计算的类(static)方法,可以直接通过类名调用. public static final Double E = 2.7182818284590452354 public

php计算函数执行时间的方法

本文实例讲述了php计算函数执行时间的方法.分享给大家供大家参考.具体如下: 我们可以通过在程序的前后分别记录开始和结束时间,两个时间差就是程序的执行时间. <?php $long_str = "this is a test to see how much time md5 function takes to execute over this string"; // start timing from here $start = microtime(true); // func

PHP 年龄计算函数(精确到天)

复制代码 代码如下: <?php /** * PHP 年龄计算函数 * * 参数支持数组传参和标准的 Mysql date 类型传参 * params sample * -------------------------------------------------- $birthArr = array( 'year' => '2000', 'month' => '11', 'day' => '3' ); $birthStr = '2000-11-03'; * ---------

JavaScript实现的GBK、UTF8字符串实际长度计算函数

大家都知道,在JS中字符串的长度不分中英文字符, 每一个字符都算一个长度,这跟PHP里的strlen()函数就不太一样.PHP里的strlen()函数根据字符集把GBK的中文每个2累加,把UTF-8的中文字符每个按3累加. 有些童鞋可能要问了,为什么要计算实际长度? 主要是为了匹配数据库的长度范围内,比如GBK的数据库某字段是varchar(10),那么就相当于5个汉字长度,一个汉字等于两个字母长度.如果是UTF8的数据库则是每个汉字长度为3. 知道了以上原理以后,我们就可以算出一个字符串的实际

一个超简单的jQuery回调函数例子(分享)

jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先弹出对话框再隐藏内容, 然后再隐藏指定内容. 这显然不是我们想要的效果, 如果使用回调函数,就可以解决这个问题. 当然,回调函数功能远不只这么简单-- 具体的代码如下: <%@ page language="java" import="java.util.*" p

php实现简单的语法高亮函数实例分析

本文实例讲述了php实现简单的语法高亮函数.分享给大家供大家参考.具体分析如下: 这是一个php实现的简单语法高亮显示的函数,注意:这个函数设计的比较简单,可能对某些语法不能高亮显示,你可以自己扩充该函数的功能 function syntax_highlight($code){ // this matches --> "foobar" <-- $code = preg_replace( '/"(.*?)"/U', '"<span styl