ajaxリクエストでjqueryを使用してJavaScript応答を取得するUJS

Question

Railsでは、application/javascriptなどの異なるMIMEタイプに応答できます。あなたは評価のためにjavascriptをブラウザに送り返すためのAjaxリクエストに、このMIMEタイプを使用することがよくあります。 respond_toのシンボルは:jsです。

は、私はこのような例を参照してください。

<%= form_tag('/articles', remote: true) do %> 
    ... 
<% end %> 

<%= link_to "Delete article", @article, remote: true, method: :delete %> 

rails.jsファイルは、リモートリンク、フォーム、および入力を見つけて、AJAXを介してサーバに提出し、そのクリックイベントを上書きします。

Serverはこのようなものがあります。私のような状況で

respond_to do |format| 
    format.js 
    end 

を、私はjQueryのでリクエストを行う必要があるので、私は、リモート使用することはできません。真の特徴を。私は、no形式のデータがサーバーに送信されませんcontentType jqueryのajax方法で'application/javascript'として指定したとき

<%= form_for @tag do |f| %> 
    <%= f.fields_for :taggings, f.object.taggings.build do |taggings_builder| %> 
    <%= taggings_builder.hidden_field :tagging_flag, value: @contact.flag %> 
    <% end %> 
    <%= f.text_field :name, class: 'form-control', placeholder: 'Add a tag and press enter' %> 
<% end %> 

私の問題はあります。私はクロムのネットワークタブでそれを調べました。 contentTypeプロパティを削除すると、フォームデータはサーバーに送信されますが、コンテンツタイプは 'application/javascript'ではありません。それは 'application/x-www-form-urlencoded; charset=UTF-8'です。

私のjqueryのは、次のようになります。

$view.on('keypress','form#add-tag input#tag_name', function(e){ 
    var $form = $(this).closest('form'); 
    var key = e.which; 

    if(key == 13){ 

     $.ajax({ 
     type: "POST", 
     data: $form.serialize(), 
     contentType: 'application/javascript', 
     url: $form.attr('action'), 
     beforeSend: function() { 
      $('.loading').show(); 
     }, 
     complete: function(){ 
      $('.loading').hide(); 
     }, 
     success: function(resp){ 
     } 
     }); 


    return false; 
    } 
}) 

私は「アプリケーション/ javascriptの」のコンテンツタイプでフォームデータをサーバーに送信することができますどのように？

Answer 1

contentTypeオプションは、コントローラに送信されるパラメータの形式を指定するために使用されます。応答するデータの種類を指定するには、dataTypeオプションを使用します。 scriptを指定すると、Javascriptが必要になることを意味し、コントローラーにブロックを使用する必要があることを示すAccept: application/javascriptヘッダーを送信します。

$.ajax({ 
    type: "POST", 
    data: $form.serialize(), 
    dataType: 'script', 
    url: $form.attr('action'), 
    beforeSend: function() { 
     $('.loading').show(); 
    }, 
    complete: function(){ 
     $('.loading').hide(); 
    }, 
    success: function(resp){ 
    } 
    });