jquery 无法用onclick触发 AJAX (但如果使用onchange，它会触发)

camsedfj 于 2023-01-30 发布在 jQuery

关注(0)|答案(2)|浏览(132)

新的 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，带有伪进程命令sleep。）

<?php

if ($_POST) {

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

当我改变选择项时，5秒后，值DONE！显示在div上。但是当我按下按钮时，它没有这样做。为什么会这样？如何实现我的需要？

jquery

来源：https://stackoverflow.com/questions/75274897/unable-to-trigger-ajax-with-onclick-but-it-triggered-if-use-onchange

2条答案

按热度按时间

y0u0uwnf1#

新手错误。在发布了一个问题后，我才意识到如果没有给出类型，表单中的所有按钮都应该是提交表单。
就这么做吧，效果很好：

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

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

赞(0）回复(0）举报 2023-01-30

zdwk9cvp2#

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

赞(0）回复(0）举报 2023-01-30

我来回答

jquery 无法用onclick触发 AJAX (但如果使用onchange，它会触发)

2条答案

相关问题

热门标签

最新问答