如何使用Jquery和ajax将表单的内容发布到php页面以进行计算/sql语句等，并将响应显示回页面？
<form name="cancelForm" action="orderCanceled.php" method="POST">
<input name="cancelExcursion" type="hidden" value="<?php echo $row['orderNo'] ?>" />
<input name="qty" type="hidden" value="<?php echo $row['quantity'] ?>" />
<input name="excursionId" type="hidden" value="<?php echo $row['excursionId'] ?>" />
<input type="submit" value="Cancel Booking" id="blueButton" />
</form>
您需要执行以下操作。
首先，创建一个data对象，并将其发布到 php 端点。此数据对象是一个持有者，它填充了表单中的所有值。从窗体将值添加到对象的方式是遍历窗体并将窗体中的每个值添加到data对象。
var data = {};
$.each($('form').serializeArray(), function(i, field) {
data[field.name] = field.value;
});
下一步是设置将数据发送到服务器的ajax POST请求。正是在这里发布先前定义的data对象。
$.ajax({
type: "POST",
url: "orderCanceled.php",
data: data,
success: function(response) {
//response will contain the data returned
//from orderCanceled.php
$("body").append(response)
}
})
.done(function() {
alert( "success" );
})
.fail(function() {
alert( "error" );
});
在成功回调中，您将收到来自订单已取消.php的响应。您可以操作此响应，并通过在返回的响应对象上使用 javascript 的点表示法来显示您选择在页面上显示的内容。
例如，如果响应对象是 json 对象并且看起来像这样：
{
"username": "garry",
"site": "StackOverflow"
}
然后，可以使用 response.username 获取 username 的值。这将返回 "garry" ，对于response.site也是如此，这将返回"StackOverflow" 。
您应该阅读有关访问 MDN 网站上的对象属性的信息。如果您正在处理 ajax 请求，则必须了解这一点以处理来自服务器的某种json响应。您可以使用点表示法或括号表示法。下面演示了两者，并将返回。使用哪一个取决于您，结果不会有任何差异。
因此，回到POST请求中的上述部分，如果返回了上面的json对象，您将执行以下操作：
success: function(response) {
//data will contain the data returned
//from orderCanceled.php
$("body").append(response.username);
$("body").append(response["site"]);
}
你可以提交这样的表格。
var cancelExcursion=$("input[name=cancelExcursion]").val();
var qty=$("input[name=qty]").val();
var excursionId=$("input[name=excursionId]").val();
var url='orderCanceled.php';
var data="cancelExcursion="+cancelExcursion+"&qty="+qty+"&excursionId"+excursionId;
$.ajax({
type: 'POST',
url: url,
data: data,
beforeSend: function() {
// You can set a loading image/div when form is submitting
},
success: function(response) {
// response contains the result from orderCanceled.php
// code for success notification
},
error: function(xhr) { // if error occured
// code for showing error
}
});