javascript - Rails 表单通过 ajax post 提交，不调用成功或错误回调函数

Question

我有一个 Rails 4 应用程序，其中有一个联系表单，我将其发布到 Rails 端点来处理它，发送电子邮件，然后将带有重定向 url 的 json 发送回客户端。

我的html表单是这样的:

<form name="contact_form" action="/contact" class="forms" >
            <fieldset>
              <ol>
                <li class="form-row text-input-row name-field">
                  <input type="text" name="name" class="text-input defaultText required" title="Name (Required)"/>
                </li>
                <li class="form-row text-input-row email-field">
                  <input type="text" name="email" class="text-input defaultText required email" title="Email (Required)"/>
                </li>
                <li class="form-row text-input-row subject-field">
                  <input type="text" name="subject" class="text-input defaultText" title="Subject"/>
                </li>
                <li class="form-row text-area-row">
                  <textarea name="message" class="text-area required"></textarea>
                </li>
                <li class="form-row hidden-row">
                  <input type="hidden" name="hidden" value="" />
                </li>
                <li class="button-row">
                  <input onclick="contact_email()" type="submit" value="Submit" name="submit" class="btn btn-submit bm0" />
                </li>
              </ol>
              <input type="hidden" name="v_error" id="v-error" value="Required" />
              <input type="hidden" name="v_email" id="v-email" value="Enter a valid email" />
            </fieldset>
          </form>

我的 JavaScript 函数是:

function contact_email(){
    form = $('form')
    form_data = document.forms.contact_form;

    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form_data,
        dataType: "JSON",
        async: false,
        success: function(data) {
            alert(data);
            window.location = data.redirect_url;
        },
        error: function(xhr, status) {
            alert(status);
        }
    });
}

(我多次尝试使用 without async: false ，以及 return false; 在函数末尾但没有工作)

和我的 Rails 端点来处理 POST

def contact_email
    UserMailer.contact_email(params).deliver
    flash[:message] = "Thank you for contacting us! We'll be in touch shortly"
    res = {:redirect_url => root_url}    
    render :json => JSON.generate(res)
end

在我的 javascript 触发后，contact_email 端点被命中，并且它完美地发送出 JSON 响应。

响应是

{"redirect_url":"http://localhost:3000/"}

但是我的 ajax 成功或错误回调都没有执行。

这是为什么？

编辑:

这可能不相关，但我确实在浏览器开发工具中看到一个控制台错误

未捕获的类型错误:非法调用

对于 jquery-1.11.1.js

Answer 1

当您在控制台中收到Uncaught TypeError:非法调用时，通常这意味着您正在尝试通过data属性传递HTML元素，JQuery会这样做< em>不喜欢。如果您使用serialize它将表单转换为包含一系列 url 编码的名称-值对的字符串，然后可以通过 ajax 轻松传递该字符串。

在这种情况下，ajax 调用实际上完成了 POST 请求，然后在非法调用上失败，这意味着后续的成功或错误回调不会被执行。

所以 - 只需像这样序列化您的表单即可:

function contact_email(){
    form = $('form')

    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize(),
        dataType: "JSON",
        async: false,
        success: function(data) {
            alert(data);
            window.location = data.redirect_url;
        },
        error: function(xhr, status) {
            alert(status);
        }
    });
}