利用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
 tdinput type="text" name="a1" value="0" id="n1" onchange="zongji()" //td
 td8/td
 /tr
 tr
 td苹果/td
 tdinput type="text" name="a2" value="0" id="n2" onchange="zongji()" //td
 td5/td
 /tr
 tr
 td橘子/td
 tdinput type="text" name="a3" value="0" id="n3" onchange="zongji()" //td
 td7/td
 /tr
 tr
 td colspan="3" class="a4"商品折扣：span0.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.phpc1=" + 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