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

Is there any way to submit the form to server for an AJAX response without reloading the page. I am able to do this with submit button. But how can I do that when a link is clicked.

有没有办法将表单提交给服务器以获取AJAX响应而无需重新加载页面。我可以使用提交按钮执行此操作。但是,如果单击链接,我该怎么做呢。

I came to know about a javascript method to do this,

我开始知道一个javascript方法来做到这一点,

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

But the above code reloads the page. I came to know that we can do this with jquery but how?

但上面的代码重新加载页面。我开始知道我们可以用jquery做到这一点,但是怎么样?

Please Note that I am developing my application in Ruby on Rails 3.0.4 and I am using the rails AJAX like this.

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

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

Any help would be appreciated.

任何帮助,将不胜感激。

5 个解决方案

#1

You can use the preventDefault() method of event object :

您可以使用事件对象的preventDefault()方法:

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

If this method is called, the default action of the event will not be triggered.

如果调用此方法,则不会触发事件的默认操作。

#2

You can use .post() to do an ajax post.

你可以使用.post()来做一个ajax帖子。

Taken from the documentation:

取自文档:

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

You could also use .submit()

你也可以使用.submit()

Taken from documentation:

取自文档:

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

Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.

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

You can combine the 2 as shown by Raminson:

您可以将Raminson所示的2组合在一起:

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

#3

I know i am a bit late to the party, as an alternative to the above anwsers, you could use the jQuery Form plugin for easy ajax form updating.

我知道我有点迟到了,作为上述anwsers的替代品,你可以使用jQuery Form插件轻松进行ajax表单更新。

If you used it, the most simple version of your JS code would look like this.

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

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

There are many more options you can use to configure it how you like. The url that the form is submitted to is the same as the action attribute of your form.

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

This can also be changed.

这也可以改变。

From my exprecience you do not need to preventDefault() the submit either, it does it for you.

从我的内心来看,你不需要阻止默认()提交,它也适合你。

Anyways, this is another alternative to your problem, if you find it convenient.

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

#4

If the problem is your page reloading with form.submit() try:

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

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

    e.preventDefault();

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

});

#5

I got it working by just using this code. No need to define a function inside submit.

我只是使用这段代码就可以了。无需在提交内定义函数。

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