在ajax请求中使用jquery获取javascript响应UJS

Using jquery in ajax request to get javascript response UJS

本文关键字：获取 javascript 响应 UJS jquery ajax 请求      更新时间：2023-09-26

在Rails中，您可以响应不同的MIME类型，包括application/javascript。您经常将这种MIME类型用于ajax请求，以将javascript发送回要评估的浏览器。respond_to符号是:js。

我看到这样的例子：

<%= form_tag('/articles', remote: true) do %>
  ...
<% end %>
<%= link_to "Delete article", @article, remote: true, method: :delete %>

rails.js文件查找远程链接、表单和输入，并覆盖它们的点击事件，以便通过AJAX提交到服务器。

服务器有这样的东西：

  respond_to do |format|
    format.js 
  end

在我的情况下，我需要在jQuery中进行请求，所以我不能使用remote:true功能。

<%= 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 %>

我的问题是，当我在jquery ajax方法中将contentType指定为'application/javascript'时，没有表单数据发送到服务器。我甚至在chrome上的"网络"选项卡中检查过它。删除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;
   }
})

如何将内容类型为"application/javascript"的表单数据发送到服务器？

contentType选项用于指定发送到控制器的参数的格式。要指定响应中预期的数据类型，请使用dataType选项；指定script意味着您期望使用Javascript，这将发送Accept: application/javascript头，该头告诉控制器应该使用哪个respond_to块。

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