使用jquery和preventDefault（）方法提交表单
[英]Submit form using jquery with preventDefault() method
问题描述
我正在尝试使用Jquery提交表单。 我的目标是使用.ajax将表单提交到服务器。 提交后，表单的内容将转到页面而无需重新加载页面（我想下面的e.preventDefault（）将实现此目的）。 代码在下面列出。
但是，当我单击“提交”时，表单似乎已重新加载。 我的代码有什么问题？
<!DOCTYPE html>
<html>
<head>
<script src="http:////code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript'>
$("#submitForm").submit(function(e){
e.preventDefault();
// some ajax code to submit the form
var container = document.getElementById("div2");
var node = document.createTextNode("put form contents here");
container.appendChild(node);
});
</script>
</head>
<body>
<h1>edit form here</h1>
<div id = "div1">
<form id = "submitForm">
<input type = "text"/>
<input type = "submit" value = "submit"/>
</form>
</div>
<h1>show form contents here</h1>
<div id = "div2">
</div>
</body>
</html>
2 个解决方案
解决方案1
0 2016-12-09 18:36:50
在表单出现在文档中之前正在执行脚本。
固定：
$(document).ready(function() {
$("#submitForm").submit(function(e){
e.preventDefault();
// some ajax code to submit the form
var container = document.getElementById("div2");
var node = document.createTextNode("put form contents here");
container.appendChild(node);
});
});
当DOMContentLoaded事件触发时，这将执行您的代码
解决方案2
0 已采纳 2016-12-09 18:38:50
[编辑]：此代码对我有用。 只是放在身体部分之后。
$("#submitForm").submit(function(e){
e.preventDefault();
var container = document.getElementById("div2");
var node = document.createTextNode("put form contents here");
container.appendChild(node);
});
jQuery-允许表单提交并覆盖preventDefault（）？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.