Rails AJAX (JSON) 响应重新加载页面答案

【问题标题】：Rails AJAX (JSON) response reloads the pageRails AJAX (JSON) 响应重新加载页面
【发布时间】：2013-09-29 16:52:11
【问题描述】：

在控制器中，对 AJAX 请求的响应如下：

@response = {resp: "ack"}
render json: @response

处理 AJAX 的 JS 是：

$('#some_btn').click(function() {    

    var valuesToSubmit = $('#some_form').serialize();
    var url = $('#some_form').attr('action');

    console.log("VALUE: " + valuesToSubmit);
    console.log("URL: " + search_url);

    $.ajax({
        type: 'POST',
        url: url, //sumbits it to the given url of the form
        data: valuesToSubmit,
        dataType: "JSON",
        success: function(data) {

            console.log("saved");
            console.log(data);

        }
    });

    return false;
});

但问题是我没有收到控制台消息，而是页面重新加载，我在新页面上获得了 json 作为文本。如何防止这种“非真 AJAX”行为？

【问题讨论】：

尝试使用 dataType: "json" 而不是 "JSON"
你真的触发了ajax请求吗？
在 $.ajax 调用之前，您是否至少收到了前两条控制台消息？根据您的 Rails 日志，它是否会进入您期望的控制器和操作？您是否使用 Firebug 之类的工具检查了请求和响应的标头，并将它们与工作 AJAX 请求中使用的标头进行了比较？
尝试通过添加断点在firebug或任何其他等效浏览器中调试上述javascript。

标签： ruby-on-rails ajax web reload

【解决方案1】：

所以，我几乎遇到了同样的问题。就我而言，我使用以下链接发送请求：

<td>
  <%= link_to add_item_path(item), 
    class: 'ui icon button',
    id: "add-item-#{item.id}",
    method: :post do %>
      <%= fa_icon 'shopping-cart' %>
    <% end %>
 </td>

我发送ajax的js是：

  $(document).ready(function() {
    $("a:regex(id,add-item-[0-9]+)").click(function(event) {
      event.preventDefault();
      var link = $(this).attr("href");

      $.ajax({
        url: link,
        method: "POST",
        dataType: "json",
        success: function(data) {
          console.log(data);
          $('#notice-modal').modal('show');
        }
      });
    })
  });

我的 rails 控制器操作是：

  def add
    @item = Item.find(params[:item_id])
    current_cart << { item_id: @item.id, quantity: 1 }
    render json: {quantity: 1}
  end

所以问题是我只使用了event.preventDefault()，但还不够。为了正常工作，我需要使用event.stopPropagation()。像这样：

  $("a:regex(id,add-item-[0-9]+)").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
    var link = $(this).attr("href");

    $.ajax({
      url: link,
      method: "GET",
      dataType: "json",
      success: function(data) {
        console.log(data);
        $('#notice-modal').modal('show');
      }
    });
  })

event.stopPropagation() 是必需的，因为 rails 组件（我认为是 rails-ujs）将请求发送到其他地方。您也可以删除method: :post，并且会正常工作。

希望我能帮上忙！

【讨论】：

【解决方案2】：

您是否需要阻止默认的表单提交操作？

$('#some_btn').click(function(event) {  
  event.preventDefault();

  //...
});

【讨论】：

【解决方案3】：

我自己也遇到过这个问题。原来，我只是忘记在我的 application.js 文件中添加“//= require jquery_ujs”。我添加后，一切正常。

【讨论】：