PHP 作业2.2 商品价格计算

最新推荐文章于 2021-12-27 09:00:24 发布

Bealei

最新推荐文章于 2021-12-27 09:00:24 发布

阅读量1.8k

点赞数 2

分类专栏： AJAX PHP 文章标签： php ajax

本文链接：https://blog.csdn.net/bealei/article/details/115333839

版权

Ajax JavaScript PHP 商品总价折扣计算

关键词由CSDN通过智能技术生成

PHP 同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

AJAX

4 篇文章 0 订阅

订阅专栏

要求

利用ajax实时输出商品折扣后总价格

效果图

在这里插入图片描述

index.php代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>商品价格计算</title>
    <style type="text/css">
      body {
        background-color: #dedede;
      }
      .main {
        border: 7px dotted #00bcff;
        width: 888px;
        height: 666px;
        margin: 222px auto;
        text-align: center;
        font-size: 28px;
      }
      table {
        border-collapse: collapse;
        margin: 0 auto;
      }
      tr {
        text-align: center;
      }
      .t-r {
        text-align: right;
      }
      #jiage {
        color: red;
      }

      input {
        border: 0;
        height: 30px;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <h1>商品价格计算</h1>
      <table border="1" bordercolor=" #00bcff" 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="t-r">商品折扣：<span>0.8</span></td>
        </tr>
        <tr>
          <td colspan="3" class="t-r">
            <div>打折后购买商品总价格: <span id="jiage"></span>元</div>
          </td>
        </tr>
      </table>
    </div>
    <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",
          "data.php?c1=" + b1 + "&c2=" + b2 + "&c3=" + b3,
          true
        );
        xmlhttp.send();
      }
    </script>
  </body>
</html>

data.php代码

  <?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;
  ?>