无法用onclick触发ajax（但使用onchange会触发）

Question

这里是 ajax 的新手。 我有一个 php 文件，其中包含一个包含简单元素的表单。 我希望能够单击“提交”，然后将表单数据发送到另一个 php 进行处理（此过程可能需要很长时间），然后在完成后，应将一些结果（文本等）返回给第一个php 文件。 这是我的代码：

<html>

<head>
<script src="jquery.min.js"></script>
<script>

    function submitBorrow() { // Call to 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。）

<?php

if ($_POST) {

    sleep(5);
    
    echo "DONE!";
    
}
?>

当我更改 select 项目时，5 秒后，值完成。 显示在 div 上，但是当我按下按钮时。 它不这样做，为什么会这样？ 以及如何实现我所需要的？

Answer 1

新手错误。 发布问题后，我才意识到如果没有给出类型，表单中的所有按钮都应提交表单。

所以就这样做了，它起作用了：

<button type="button" onclick="submitBorrow();">Borrow</button>

我指定了 type="button" 并且它不再是提交按钮并解决了我遇到的问题。

Answer 2

在这种情况下，您始终可以使用 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>