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

它命中了post请求，我的服务器返回错误：

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.
  });
});

Ajax导致错误：在表单提交

1 个答案: