Question

我在div中有一个表单。提交表单会刷新div的包含页面。当我提交表单时，jQuery不会中断表单的提交并执行。

我的代码：

<html>
<head>
<script src="/js/jquery.prod.2.2.0.js"></script>
<script>
$("#genericForm").on('submit', function(e) {
    console.log("Here");
    $.ajax({
           type: "POST",
           url: "/app.php";
           data: $(this).serialize(),
           success: function(data){
           console.log(data);
         }
    });
e.preventDefault();
return false;
});
</script>
</head>
<body>
<form enctype="multipart/form-data" method=post action="/app.php" id="genericForm"> 
<input name=firstname type=text>
<input name=lastname type=text>
<input name=nickname type=text>
<input type=submit>
</form>
</body>
</html>

Answer 1

首先，这里有语法错误：

url: "/app.php";

你需要一个逗号而不是分号：

url: "/app.php",

此外，您需要将代码放在$(document).ready事件处理程序中以使其正常工作。由于您在放置表单之前已经放置了代码，因此会立即执行，而在DOM中找不到任何表单。所以像这样修复它：

$(document).ready(function () {
    $("#genericForm").on('submit', function(e) {
        console.log("Here");
        $.ajax({
            type: "POST",
            url: "/app.php",
            data: $(this).serialize(),
            success: function(data){
                console.log(data);
            }
        });
        e.preventDefault();
        return false;
    });
});

Answer 2

语法错误Uncaught SyntaxError: Unexpected token ;会破坏submit handler

它与e.preventDefault();

无关

这里有语法错误：

url: "/app.php";
______________^^

必须,这样：url: "/app.php",

试试这个：

＆＃13;

$("#genericForm").on('submit', function(e) {
  e.preventDefault();
  console.log("Here");
  $.ajax({
    type: "POST",
    url: "/app.php",
    data: $(this).serialize(),
    success: function(data) {
      console.log(data);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form enctype="multipart/form-data" method=post action="/app.php" id="genericForm">
  <input name=firstname type=text>
  <input name=lastname type=text>
  <input name=nickname type=text>
  <input type=submit>
</form>

＆＃13;

Fiddle here

Answer 3

e.preventDefault会阻止元素的默认行为。但它应该在执行任何其他任务之前放置，而不是默认功能。

$("#genericForm").on('submit', function(e) {
    e.preventDefault();
    $.ajax({
           type: "POST",
           url: "/app.php";
           data: $(this).serialize(),
           success: function(data){
           console.log(data);
         }
    });
});

Answer 4

正如理查德在评论中所建议的那样，尝试将e.preventDefault()移到功能的顶部。提交和刷新很可能是在e.preventDefault()注册之前发生的。

使用jQuery调用API，然后刷新包含表单的div的内容？

4 个答案: