Ошибка создания Ajax: Начальная POST "/ [object% 20Object]" on form submit

Question

Я использую Rails для создания страницы с возможностью отправки контактной информации и создания контактного объекта. Контроллер для создания Контакта является:

def create 
@contact = Contact.new(contact_params) 
if @contact.save 
    render json: @contact, status: :created 
else 
    render json: @contact.errors.full_messages, status: :unprocessable_entity 
end 
end 

с contact_params из:

def contact_params 
    params.require(:contact).permit(:name, :email, :phone, :company, :message) 
end 

форма подает и создает объекты в порядке, если я обрабатывать весь редирект, но я хочу, чтобы справиться с созданием с JS. Я использовал этот метод, прежде чем в форме представления без каких-либо проблем, но по какой-то причине, когда я бегу:

$(document).ready(function(){ 
    $('#new_contact').on('submit', function(ev){ 
    ev.preventDefault() 
    $.post({ 
     url: $(ev.target).attr('action'), 
     data: new FormData(ev.target), 
     processData: false, 
     contentType: false, 
     success: function(data){ 
     $('#new_contact').append('<div class="col-xs-12 col-sm-6 col-sm- offset-3"><h3>Thanks for contacting me,' + data.name + '. I will get back to you as soon as I can.</h3></div>') 
     document.getElementById('new_contact').reset() 
     $('#new_contact input[type="submit"]').prop('disabled', false) 
     }, 
     error: function(error){ 
     $('#new_contact').append('<div class="col-xs-12 col-sm-6 col-sm-offset-3"><h3>Sorry, I need at least a name and valid e-mail.</h3></div>') 
     $('#new_contact input[type="submit"]').prop('disabled', false) 
     } 
    }) 
    }) 
}) 

Бьет запрос на почту и мой сервер возвращает ошибку:

ActionController :: RoutingError (Нет сопоставлений маршрутов [POST] "/ [object% 20Object]"):

Я никогда не сталкивался с этой ошибкой раньше, и я не уверен, как это исправить. Любая помощь приветствуется.

Answer 1

Попробуйте использовать Rails 'remote вариант для формы, которая представляет собой встроенный способ обработки форм с помощью AJAX.

Ваша форма (на ваш взгляд) должно выглядеть следующим образом:

<%= form_for @contact, url: url_for(:controller => :contacts, :action => :create), remote: true, 'data-type': :json do |f| %> 
    <!-- insert the rest of your form here --> 
<% end %> 

Ваш контроллер может оставаться как есть (это просто необходимо вернуть JSON в AJAX запросов форме, которую она уже делают), и ваш JS должен измениться на это:

$(document).ready(function() { 
    $("form#new_contact").on('ajax:success', function(event, data, status, xhr) { 
    // The returned JSON structure is available in data. 
    $('#new_contact').append('<div class="col-xs-12 col-sm-6 col-sm- offset-3"><h3>Thanks for contacting me,' + data.name + '. I will get back to you as soon as I can.</h3></div>'); 
    document.getElementById('new_contact').reset(); 
    $('#new_contact input[type="submit"]').attr('disabled', false); 
    }); 

    $("form#new_contact").on('ajax:error', function(event, xhr, status, error) { 
    console.log("AJAX request failed."); 
    // Do something about the failure so the user knows it happened. 
    }); 
});