脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → ajax商品价格计算

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

 更新时间：2021年03月31日 17:09:35   作者：Bealei  
这篇文章主要为大家详细介绍了利用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>

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

您可能感兴趣的文章:

相关文章

  • 经典的20道AJAX面试题(必知必会)

    经典的20道AJAX面试题(必知必会)

    本文给大家介绍20道jquery ajax面试题，在前端开发阶段经常会问到，今天小编给大家分享经典的20道AJAX面试题，感兴趣的朋友一起学习吧
    2016-09-09
  • AJAX实现瀑布流布局

    AJAX实现瀑布流布局

    这篇文章主要介绍了AJAX实现瀑布流布局的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库

    深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库

    jQuery.AjaxFileUpload.js是一款jQuery插件，用于通过ajax上传文件。本文给大家介绍AjaxFileUpload实现单个文件的 Ajax 文件上传库，对此感兴趣的朋友一起学习吧
    2016-04-04
  • AJAX原理以及axios、fetch区别实例详解

    AJAX原理以及axios、fetch区别实例详解

    前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch,下面这篇文章主要给大家介绍了关于AJAX原理以及axios、fetch区别的相关资料,需要的朋友可以参考下
    2022-04-04
  • 浅谈Ajax和JavaScript的区别

    浅谈Ajax和JavaScript的区别

    下面小编就为大家带来一篇浅谈Ajax和JavaScript的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • jquery ajax提交表单从action传值到jsp实现小结

    jquery ajax提交表单从action传值到jsp实现小结

    pw.print(random);这里的random就是action要向jsp传的值，在jsp中，success: function(text)这里的text就是接收从action传过来的值，感兴趣的朋友可以参考下哈
    2013-04-04
  • layui Ajax请求给下拉框赋值的实例

    layui Ajax请求给下拉框赋值的实例

    今天小编就为大家分享一篇layui Ajax请求给下拉框赋值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Ajax发送和接收请求

    Ajax发送和接收请求

    这篇文章主要为大家详细介绍了Ajax发送和接收请求的相关资料，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 非常简单的Ajax请求实例附源码

    非常简单的Ajax请求实例附源码

    这篇文章为大家推荐了一个非常简单的Ajax请求实例，可以在不重载页面的情况与 Web 服务器交换数据，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 使用jquery 的ajax调用总是错误亲测的解决方法

    使用jquery 的ajax调用总是错误亲测的解决方法

    使用jquery 的ajax功能调用一个页面，却发现总是出现错误，经过这么多测试终于正常了,尤其是 dataType: 'json'，看来jquery有很严格的验证机制
    2013-07-07

最新评论