AJAX 成功响应不起作用 Rails答案

【问题标题】：AJAX success response not working RailsAJAX 成功响应不起作用 Rails
【发布时间】：2015-03-26 03:56:37
【问题描述】：

我有一个使用 AJAX 成功发送的邮件程序，但是当单击提交按钮时，它一直处于按下状态，并且没有显示成功消息。多次单击该按钮会导致提交多个表单。按钮应该重置，并且（根据我的理解）AJAX:success 事件应该生成某种文本以显示它是成功的。

AJAX 脚本（来自rails guides）

<script>
$(document).ready ->
  $("#AJAX-form").on("ajax:success", (e, data, status, xhr) ->
    $("#AJAX-form").append xhr.responseText
  ).on "ajax:error", (e, xhr, status, error) ->
    $("#AJAX-form").append "<p>ERROR</p>"
</script>

（更新后的）表格：

<%= form_tag("/pages/thank_you", remote: true, id: 'AJAX-form') do %>
      <div class="row">
        <div class="col-md-2">
          <div class="input-group">
              <%= text_field_tag :name, nil, class: 'form-control', placeholder: 'Name' %>
          </div>
        </div>
        <div class="col-md-4">
          <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">@</span>
            <%= text_field_tag :email, nil, class: 'form-control', placeholder: 'Email' %>
          </div>
        </div>
      </div>
      <br>
      <div class="row">
        <div class="col-md-6">
          <div class="input-group text-area-wide">
              <%= text_area_tag :message, nil, class: 'form-control text-area-wide', placeholder: 'Message' %>
          </div>
        </div>
      </div>
      <br>
      <%= submit_tag 'Send Message', class: 'btn btn-success' %>
  <% end %>

控制器动作：

def thank_you
    @name = params[:name]
    @email = params[:email]
    @message = params[:message] || "Hello!"
    UserMailer.contact_form(@email, @name, @message).deliver
end

【问题讨论】：

$("#AJAX-form") 正在寻找 id="AJAX-form" 的元素。您的表单似乎有 class="AJAX-form"。

标签： jquery ruby-on-rails ajax forms

【解决方案1】：

仔细检查您的 JavaScript 绑定。

$("#AJAX-form").on(...)

正在寻找具有 id="AJAX-form" 的元素。您的表单似乎有 class="AJAX-form"。

要么绑定到类

$(".AJAX-form").on(...)

或更改您的表单 ID 以匹配

<%= form_tag("/pages/thank_you", remote: true, id: 'AJAX-form') do %>

【讨论】：

用这个更正的代码更新了代码，但原来的问题仍然存在。

【解决方案2】：

从 1.9 版本开始，ajaxSuccess 只能附加在文档对象上。 "$(document).ajaxSucces(function(){...});"

但是你可以使用下面的代码：

$('form').submit(
    function(){
        return $.ajax({
            url: $(this).attr("action"),
            data:data,
            processData: false,
            contentType: false,
            type: "POST",
            dataType : "json",
            success: function( result ) {
                $form.trigger('submit:success');
            },
            error: function( xhr, status, errorThrown ) {
                console.log( "Error: " + errorThrown );
                console.log( "Status: " + status );
                console.dir( xhr );
                $form.trigger('submit:error');
            },
            complete: function( xhr, status ) {
                $form.trigger('submit:complete');
                console.log( "The request is complete!" );
        }
    }
);


 $('form.SpecialForm').on('submit:success', myFunction1);

 $('form.OtherSpecialForm').on('submit:success', otherFunction);

 $('form.ThirdSpecialForm').on('submit:error', thirdFunction);

 $('form.OneMoreSpecialForm').on('submit:complete', oneMoreFunction);

 $('form.theLastSpecialForm').on('submit:complete', theLastFunction);

【讨论】：