使用Ajax在MVC中提交表单。无法防止默认表单提交

Question

我想提交一个表单使用Ajax在ASP.NET中，一切工作正常，但我不能阻止使用e.preventdefault（）方法的默认表单提交。

这是我的jQuery AJAX提交代码：

$('#submitBtn').on('click', function() { 
    $('#addNewContact').submit(function (e) { 

     e.preventDefault(); 

     $.ajax({ 
      type: "POST", 
      url: $(this).attr('action'), 
      data: $(this).serialize(), 
      dataType: 'json', 
      success: function (message) { 
       console.log(message); 
      }, 
      error: function (message) { 
       console.log(message); 
      } 

     }) 


    }) 
}) 

Answer 1

如果你有一个表格ID addNewContact和一个提交按钮，然后你可以用这样的方式来注册它

$('#addNewContact').submit(function (e) { 

    e.preventDefault(); 

    $.ajax({ 
     // ... 
    }); 

}); 

在你代码，你已经使用了$(this).attr('action')这意味着你正在尝试使用表单提交事件，但是你在代码中做错了。你所做的是：

$('#submitBtn').on('click', function() { // Click handler registered 

    $('#addNewContact').submit(function (e) { // Submit handler registered 

     e.preventDefault(); 

     $.ajax({ 
      // ... 
     }); 

    }); 
}); 

所以，你的代码应为如下（为表单提交事件）：

$('#addNewContact').submit(function (e) { 

    e.preventDefault(); 

    $.ajax({ 
     type: "POST", 
     url: $(this).attr('action'), 
     data: $(this).serialize(), 
     dataType: 'json', 
     success: function (message) { 
      console.log(message); 
     }, 
     error: function (message) { 
      console.log(message); 
     } 
    }); 

}); 

Answer 2

如果e.preventDefault()不工作，你可以写 - 在最后陈述 - return false;该功能执行您所需的功能，并将防止默认表单提交。