Question

在控制器中，对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”行为？

Answer 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，并且可以正常使用。

希望我帮忙！

Answer 2

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

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

  //...
});

Answer 3

我自己有这个问题。事实证明，我只是忘了添加＆＃34; // = require jquery_ujs＆＃34;到我的application.js文件。一旦我添加它，一切正常。

Rails AJAX（JSON）响应重新加载页面

3 个答案: