什么时候应该加载 Ajax 代码？
Posted
技术标签:
【中文标题】什么时候应该加载 Ajax 代码？【英文标题】：When should the Ajax code be loaded? 【发布时间】：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 以防止默认提交...
页面加载完成前用户如何提交表单？
当表单提交按钮被加载时，我可以点击它，因此如果不采取任何措施来阻止它，表单将被提交。
【参考方案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();” 单独是不够的，尤其是在正文末尾加载时。
【讨论】：
以上是关于什么时候应该加载 Ajax 代码？的主要内容，如果未能解决你的问题，请参考以下文章