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

我做了Mark建议的事情：

 <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>

＆＃34; onsubmit =＆＃34; return false;＆＃34; ＆＃34;将阻止经典提交在任何时间。这就是我所需要的。＆＃34; e.preventDefault（）; ＆＃34;单独是不够的，特别是当它被装在身体末端时。

应该何时加载Ajax代码？

2 个答案: