我是 Ajax 新手。我有一个 PHP 文件,其中有一个包含简单元素的表单。 我希望能够单击“提交”,然后将表单数据发送到另一个 php 来处理它(这个过程可能需要很长时间),然后完成后,应将一些结果(文本等)返回给第一个php 文件。这是我的代码:
<html>
<head>
<script src="jquery.min.js"></script>
<script>
function submitBorrow() { // Call to the 'ajax' function
$.ajax({
type: "POST",
url: "sendEmail.php",
data: { test:'yes', wat:'no' },
success: function(html)
{
$("#emailResultDiv").html(html);
}
});
}
</script>
</head>
<body>
<form id="borrowForm" name="borrowForm">
<select name="duration" id="duration" onchange="submitBorrow();">
<option value="3 days">3 days</option>
<option value="4 days">4 days</option>
<option value="5 days">5 days</option>
<option value="6 days">6 days</option>
<option value="1 week">7 days</option>
<option value="2 week">14 days</option>
<option value="3 week">21 days</option>
<option value="1 month">30 days</option>
<option value="40 days">40 days</option>
<option value="60 days">60 days</option>
</select>
<button onclick="submitBorrow();">submitBorrow</button>
<div id="emailResultDiv">Here</div>
</form>
</body>
</html>
这是我的sendEmail.php的内容(只是一个简单的PHP,带有假进程命令sleep)。
<?php
if ($_POST) {
sleep(5);
echo "DONE!";
}
?>
当我更改所选项目时,5 秒后,值“DONE!”显示在 div 处。但当我按下按钮时,它并没有这样做。为什么会这样,如何实现我所需要的?
在这种情况下,您始终可以使用 PreventDefault() 来阻止表单提交。
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"
></script>
<script>
$(document).ready(function () {
$("#submitBorrow").click(function (event) {
event.preventDefault();
// Call to ajax function
$.ajax({
type: "POST",
url: "sendEmail.php",
data: { test: "yes", wat: "no" },
success: function (html) {
$("#emailResultDiv").html(html);
},
});
});
$("#duration").on("change", function (event) {
$("#submitBorrow").click();
});
});
</script>
</head>
<body>
<form id="borrowForm" name="borrowForm">
<select name="duration" id="duration">
<option value="3 days">3 days</option>
<option value="4 days">4 days</option>
<option value="5 days">5 days</option>
<option value="6 days">6 days</option>
<option value="1 week">7 days</option>
<option value="2 week">14 days</option>
<option value="3 week">21 days</option>
<option value="1 month">30 days</option>
<option value="40 days">40 days</option>
<option value="60 days">60 days</option>
</select>
<button id="submitBorrow">submitBorrow</button>
<div id="emailResultDiv">Here</div>
</form>
</body>
</html>
菜鸟错误。发布问题后,我刚刚意识到,如果未给出类型,表单中的所有按钮都应为“提交表单”。
所以就这样做了,它起作用了:
<button type="button" onclick="submitBorrow();">Borrow</button>
我指定了 type="button",它不再是提交按钮并解决了我遇到的问题。