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

【问题标题】：When should the Ajax code be loaded?什么时候应该加载 Ajax 代码？
【发布时间】：2016-06-23 02:44:54
【问题描述】：

我在我的网站上使用 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，即使页面加载尚未完成？

【问题讨论】：

第一个很好（就在</body> 标记之前），如果表单位于脚本之前，您应该没有任何问题。您可以尝试将整个内容包装在文档就绪函数$(function(){ /* code here */}); 中。编辑：您可以尝试设置 onsubmit 为表单返回 false 以防止默认提交...
页面加载完成前用户如何提交表单？
当表单提交按钮被加载时，我可以点击它，因此如果不采取任何措施来阻止它，表单将被提交。

标签： jquery ajax jquery-selectors

【解决方案1】：

我认为你需要防止表单提交的默认操作。

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

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

【讨论】：

不幸的是，当这个脚本放在正文的末尾时，它也是在 HTML 之后加载的。当页面加载时会发生什么（当加载 HTML 的上部，而不是包含脚本的下部）并且我单击提交表单按钮时，表单仍然会正常提交。 onsubmit="返回假；"将阻止在加载表单的 HTML 时立即提交。

【解决方案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();” 单独是不够的，尤其是在正文末尾加载时。

【讨论】：