0

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

4

3 回答 3

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, 并且可以正常工作。

希望我有所帮助！

于 2017-06-19T13:31:59.650 回答
0

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

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

  //...
});
于 2013-09-24T14:29:52.340 回答
0

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

于 2013-10-03T12:22:10.170 回答