Rails AJAX (JSON) ответ перезагружает страницу

Question

В контроллере ответ на запрос AJAX заключается в следующем:

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

JS, который обрабатывает AJAX является:

$('#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

Вам нужно предотвратить действие отправки формы по умолчанию?

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

    //... 
}); 

Answer 2

У меня была эта проблема. Оказывается, я просто забыл добавить «// = require jquery_ujs» в файл application.js. Как только я добавил, все сработало нормально.

Answer 3

Итак, у меня была почти такая же проблема. В моем случае, я использовал folliwing ссылку, чтобы отправить запрос:

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

My 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'); 
     } 
     }); 
    }) 
    }); 

и мои действия рельсов контроллера было:

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() необходим, потому что рельсы компонентов (рельсы-UJS я думаю) послал запрос в другом месте. Вы также можете удалить method: :post и будете работать нормально.

Надеюсь, я помог!