快捷導(dǎo)航

利用ajax+php實現(xiàn)商品價格計算

更新時間：2021年03月31日 17:09:35 作者：Bealei

這篇文章主要為大家詳細(xì)介紹了利用ajax+php實現(xiàn)商品價格計算，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了商品價格計算的具體代碼，利用ajax和php實現(xiàn)以下頁面

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>購買數(shù)量（斤）</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.創(chuàng)建對象
 var xmlhttp;
 if (window.XMLHttpRequest) {
 // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
 xmlhttp = new XMLHttpRequest();
 } else {
 // IE6, IE5 瀏覽器執(zhí)行代碼
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 //2.判斷對象是否準(zhǔn)備就緒
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  document.getElementById("jiage").innerHTML = xmlhttp.responseText;
 }
 };
 //3.發(fā)出請求
 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: