Question

我有一个使用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

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

Answer 2

从1.9版本开始，ajaxSuccess只能附加在文档对象上。 “$（文件）.ajaxSucces（函数（）{...}）;”

但您可以使用以下代码：

$('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);

AJAX成功响应不工作Rails

2 个答案: