Question

我正在尝试使用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>

Answer 1

在表单出现在文档中之前，脚本正在执行。

修正：

$(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事件触发时执行您的代码

Answer 2

[已编辑]：此代码适合我。把它放在身体部分之后。

    $("#submitForm").submit(function(e){
      e.preventDefault();
      var container = document.getElementById("div2");
      var node = document.createTextNode("put form contents here");           
      container.appendChild(node);     
    });

使用带有preventDefault（）方法的jquery提交表单

2 个答案: