通过AJAX提交表单而无需重新加载页面

Question

有没有办法在不重新加载页面的情况下将表单提交到服务器以获取 AJAX 响应。我能够通过提交按钮做到这一点。但是当链接被点击时，我该如何做到这一点。

我了解了一种 JavaScript 方法来实现此操作，

var form = document.getElementById('myForm');
form.submit();

但是上面的代码会重新加载页面。我知道我们可以使用jQuery来做到这一点，但是怎么做呢？

请注意，我正在使用Ruby on Rails 3.0.4开发我的应用程序，我正在像这样使用Rails AJAX。

<%= form_for @search, :remote => true, :url => request_path, :html => {:method => :get, :id => :my_form} do |f| %>

任何帮助都将不胜感激。

- Kashif Umair Liaqat

---

也许你应该在提交处理程序中加入 event.preventDefault(); 语句，以防止默认页面刷新。 - lexeme

Answer 1

你可以使用事件对象的preventDefault()方法：preventDefault()。

$('#myForm').submit(function(event){
   event.preventDefault(); 
   $.ajax({
     ...
   });
})

如果调用了这个方法，事件的默认操作将不会被触发。

- Ram

Answer 2

你可以使用.post()进行ajax post请求。

从文档中获取：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

你也可以使用 .submit()。

来自文档的摘录：

$('#target').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

现在当表单被提交时，会弹出消息。这发生在实际提交之前，因此我们可以通过在事件对象上调用.preventDefault()或从处理程序返回false来取消提交操作。

您可以像Raminson一样将两者组合起来使用：

$('#target').submit(function() {
    .preventDefault()
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: success,
        dataType: dataType
    });
});

- Nope

---

你的第二个选项对我来说很完美。我刚刚写了你提供的解决方案的一部分，即'$('#target').submit();。不知道为什么，但它按照我想要的方式工作了。不需要调用.preventDefault()。 - Kashif Umair Liaqat

Answer 3

我知道我来晚了，作为上面答案的替代方案，你可以使用jQuery表单插件轻松实现ajax表单更新。

如果你使用它，你的JS代码最简单的版本将如下所示。

$('#myform').ajaxForm(function() { 
  success: alert('success');
});

有许多选项可用于按您的喜好配置它。

表单提交的url与您的表单的action属性相同。

这也可以更改。

根据我的经验，您不需要preventDefault()提交，它会为您执行。

无论如何，如果您觉得方便，这是解决您问题的另一种选择。

- Alex

Answer 4

如果问题是您的页面使用form.submit()重新加载，请尝试以下方法：

var form = document.getElementById('myForm');
form.submit(function(e){

    e.preventDefault();

    //an ajax post as in François Wahl answer

});

- Carlo Moretti

Answer 5

我只用了这段代码就使它正常工作了。不需要在提交内定义函数。

$('#myform').submit();

- Kashif Umair Liaqat

---

正确答案是 François Wahl 的那个，这个是错误的，绿色勾选标志是误导性的。 你能移动绿色勾选标志吗？ - peveuve