Ajax 代码应该什么时候加载？

Question

我在我的网站上使用 Ajax 提交表单而无需重新加载当前页面。我将所有 Javascript: 代码放在 </body> 标记之前。

但是我注意到，当我加载页面并在加载结束前提交表单时，页面会重新加载，就像 Ajax 不存在一样。

我的代码现在是这样的：

<html>
    <head></head>
    <body>
        <form id="ajaxForm"></form>
        <script type="text/javascript">
            $("#ajaxForm").on("submit", function(e){
                $.ajax({});
            });
        </script>
    </body>
</html>

我认为下面的代码可以完成我所做的，但是我想使用选择器（例如#ajaxForm）作为触发元素来执行Ajax.

<html>
    <head>
        <script type="text/javascript">
            function submitForm(){
                $.ajax({});
            }
        </script>
    </head>
    <body>
        <form id="ajaxForm" onsubmit="submitForm()"></form>            
    </body>
</html>

我应该如何安排我的代码以正确使用 Ajax，即使页面加载尚未完成？

Answer 1

我认为您需要阻止表单提交的默认操作。

您可以通过将 e.preventDefault(); 添加到您的第一个脚本中来实现此目的：

$("#ajaxForm").on("submit", function(e){
    e.preventDefault();
    $.ajax({});
});

Answer 2

我按照马克的建议做了：

 <html>
    <head></head>
    <body>
        <form id="ajaxForm" onsubmit="return false;"></form>
        <script type="text/javascript">
            $("#ajaxForm").on("submit", function(e){
                e.preventDefault();
                $.ajax({});
            });
        </script>
    </body>
 </html>

“onsubmit="return false;"”将随时阻止经典提交。这就是我需要的。 " e.preventDefault(); " 单独是不够的，尤其是当它加载在主体的末尾时。

Ajax 代码应该什么时候加载？

When should the Ajax code be loaded?

ajax

jquery

jquery-selectors