ajax商品价格计算利用ajax+php实现商品价格计算

时间:2021-03-31 Bealei 人气:0

想了解利用ajax+php实现商品价格计算的相关内容吗，Bealei在本文为您仔细讲解ajax商品价格计算的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：ajax商品价格计算,php商品价格计算,ajax价格计算，下面大家一起来学习吧。

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

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

加载全部内容

ajax商品价格计算 利用ajax+php实现商品价格计算

ajax商品价格计算利用ajax+php实现商品价格计算