如何让 Ajax 调用在此处显示输出？ [关闭]
Posted
技术标签:
【中文标题】如何让 Ajax 调用在此处显示输出？ [关闭]【英文标题】：How do I get the Ajax call to display the output here? [closed] 【发布时间】：2022-01-22 14:31:56 【问题描述】：我被分配创建一个网页，用户在该网页中输入商品的价格、他们购买的数量，然后点击显示总成本（价格乘以数量）的按钮。我以前做过多个这样的作业，而且它们都工作得很好。但无论出于何种原因，当我单击按钮时，Ajax 代码都不会显示。这是我目前输入的代码。
<html>
<head>
<title></title>
<style type="text/css">
body
color: white;
font-family: arial;
text-align: center;
font-weight: bold;
background-image: url("http://newton.ncc.edu/gansonj/ite254/img/stars.jpg");
#contentwrap
width: 600px;
min-height: 400px;
margin: 20px auto 20px auto;
border: 2px orange solid;
border-radius: 15px;
background-image: url("http://newton.ncc.edu/gansonj/ite254/img/nebula.jpg");
background-repeat: no-repeat;
background-position: right;
#formwrap
background: lightyellow;
color: darkblue;
margin: 30px;
font-size: 1em;
padding: 10px;
border-radius: 15px;
border: 4px solid darkblue;
opacity:0.8;
#titlewrap
color: darkred;
margin-bottom: 20px;
font-size: 1.25em;
#output
background: lightblue;
color: green;
padding: 10px;
border-radius: 15px;
border: 4px solid darkred;
opacity: 1.0;
font-size: 1.35em;
height: 40px;
input
font-weight: bold;
font-size: 1em;
padding: 2px 5px 2px 5px;
border: 1px solid darkred;
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$("document").ready( function()
// assign event handler to the form
$("#calcbutton").on( "click", function()
var quantity = $("#quantity").val();
$.ajax(
url: "CalcTotalAjax.php",
type: "POST",
data: "quantity=" + quantity,
success: function(msg)
if(quantity < 100)
$("#output").hide().html("<div style='color:green;'>" + msg + "</div>").show("fade");
else
$("#output").hide().html("<div style='color:purple;'>" + msg + "</div>").show("fade");
);
); // ends click handler
);
</script>
</head>
<body>
<div id="contentwrap">
<div id="formwrap">
<div id="titlewrap">
Calculate Total Cost<p />
Purchase more than 100 items output is purple<br>
Less then 100 items output is green
</div>
<form>
Cost of item<br />
<input type="text" size="20" id="cost">
<p />
Quantity<br />
<input type="text" size="20" id="quantity">
<p />
<input type="button" value="Purchase" id="calcbutton">
</form>
<div id="resultswrap">
<div id="output"></div>
</div>
</div> <!-- closes formwrap div -->
</div> <!-- closes pagewrap div -->
</body>
</html>
这是 Ajax 文件
<?php
if( isset( $_POST['cost'] ) && isset( $_POST['quantity'] ) )
echo "Total is $". $_POST['cost'] * $_POST['quantity'];
// ends isset IF check
?>
有谁知道我可能做错了什么？
【问题讨论】：
$_POST['cost'] cost 的数据，所以isset($_POST['cost']) 为假
【参考方案1】：
在 PHP 中，您使用的是成本，但不是传递成本。当您同时检查成本和数量时，您需要在 Ajax Call 中发送这两个字段：
查看表格示例以获得更好的想法：
$("document").ready( function()
// assign event handler to the form
$("#calcbutton").on( "click", function()
var quantity = $("#quantity").val();
var cost = $("#cost").val();
$.ajax(
url: "CalcTotalAjax.php",
type: "POST",
data: "quantity":quantity,"cost":cost,
success: function(msg)
if(quantity < 100)
$("#output").hide().html("<div style='color:green;'>" + msg + "</div>").show("fade");
else
$("#output").hide().html("<div style='color:purple;'>" + msg + "</div>").show("fade");
);
); // ends click handler
);
【讨论】：
以上是关于如何让 Ajax 调用在此处显示输出？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章
如何让 Try except 输出更多细节？显示它到底发生在哪里？ - Python [重复]
如何在 Cakephp 3 的 ajax 调用中定义 CSRF 令牌。此外，对于某些 ajax 请求，如何关闭 CSRF