3

ページをリロードせずにAJAX応答のためにフォームをサーバーに送信する方法はありますか？送信ボタンでこれを行うことができます。しかし、リンクがクリックされたときにどうすればそれを行うことができますか。

これを行うためのjavascriptメソッドについて知りました。

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

しかし、上記のコードはページをリロードします。jqueryでこれができることを知りましたが、どうすればよいですか？

私はRubyonRails 3.0.4でアプリケーションを開発しており、このようにRailsAJAXを使用していることに注意してください。

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

どんな助けでもいただければ幸いです。

4

5 に答える 5

10

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フォームプラグインを使用してajaxフォームを簡単に更新できます。

これを使用した場合、JSコードの最も単純なバージョンは次のようになります。 

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

好きなように設定するために使用できるオプションは他にもたくさんあります。actionフォームが送信されるURLは、フォームの属性と同じです。

これも変更できます。

私の感謝の気持ちから、あなたも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 に答える