3

有没有办法在不重新加载页面的情况下将表单提交到服务器以获得 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| %>

任何帮助，将不胜感激。

4

5 回答 5

10

您可以使用object的preventDefault()方法：event

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

如果调用该方法，则不会触发事件的默认动作。

于 2012-08-09T11:39:25.323 回答
3

您可以使用.post()进行 ajax 发布。

取自文档：

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

你也可以使用.submit()

取自文档：

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

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

您可以将 2 组合起来，如下所示Raminson：

$('#target').submit(function() {
    .preventDefault()
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: success,
        dataType: dataType
    });
});
于 2012-08-09T11:35:10.367 回答
2

我知道我参加聚会有点晚了，作为上述答案的替代方案，您可以使用jQuery Form 插件来轻松更新 ajax 表单。

如果你使用它，你的 JS 代码最简单的版本应该是这样的。 

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

您可以使用更多选项来配置它。表单提交到的 url 与表单的action属性相同。

这也可以改变。

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

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

于 2012-08-10T18:36:36.950 回答
1

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

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

    e.preventDefault();

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

});
于 2012-08-09T11:39:51.827 回答
-1

我只需使用此代码即可使其正常工作。无需在提交中定义函数。

$('#myform').submit();
于 2012-09-30T09:15:39.500 回答