Question

我有一个使用Webpacker，jQuery 3的Rails 5.1应用程序。我正在尝试在制作Ajax帖子后将json渲染回浏览器。这是我的控制器：

def create
  @giver = Giver.new(giver_params)
  return unless @giver.valid?
  if @giver.save
    render json: { location: 'url' }, status: :ok
  end
end

这是我的javascript（我有一条路由指示/提供给控制器的create方法）：

  $form.get(0).submit();

  var jqxhr = $.ajax({
      url: '/give',
      type: 'POST',
      dataType: 'json',
      data: $form.serialize()
    })
    .done(function() {
      console.log(jqxhr['responseText']);
      $('#new-gift').hide(function() {
        $('#confirm-gift').show();
      });
      return false;
    })
    .fail(function() {
    })
    .always(function() {
    });
}

我已经这么做了很多次没有任何麻烦，但由于某种原因它现在正在渲染

{"location":"url"}

在屏幕上，未在.done调用中执行任何功能（隐藏/显示div）。它也可以很好地保存数据库中的所有内容。我认为return false;部分中的.done可以解决问题，但事实并非如此。有任何想法吗？我没有看到任何其他问题可以解决这个问题 - 如果他们在那里，请指导我回答。谢谢。

.container.active-div#new-gift
  = form_for @giver, url: give_path, remote: true, html: { id: "payment-form" } do |f|
    %h3 Your Information
      .panel-body
        .row
          .col-md-6
            = f.text_field :first_name, class: "form-control", placeholder: "First Name"
            %br/
          .col-md-6
            = f.text_field :last_name, class: "form-control", placeholder: "Last Name"
            %br/          
    .row
      .col-md-12.text-center
        %br/
        = button_tag "Donate", class: "btn btn-primary btn-lg submit", style: "width: 150px; margin-bottom: 50px;"

Answer 1

由于您要触发手动ajax表单提交，因此表单中不需要remote: true。只需从表单中删除remote: true，并在触发后阻止表单提交事件。然后，代码看起来像

 $("#payment-form").submit(function(event){
   var jqxhr = $.ajax({
      url: '/give',
      type: 'POST',
      dataType: 'json',
      data: $form.serialize()
    })
    .done(function() {
       console.log(jqxhr['responseText']);
       $('#new-gift').hide(function() {
         $('#confirm-gift').show();
       });
    });
    .fail(function() {
    })
    .always(function() {
    });
    event.preventDefault();
 });

希望这会有所帮助。

Rails渲染json在屏幕上显示

1 个答案: