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

（我尝试过没有async：false多次，以及返回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成功或错误回调都没有被执行过。

为什么会这样？

编辑：

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

未捕获的TypeError：非法调用

表示jquery-1.11.1.js

Answer 1

当您在控制台中获得Uncaught TypeError: Illegal invocation时，通常这意味着您尝试通过data属性传递HTML元素，而JQuery 。如果使用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);
        }
    });
}

Answer 2

将表单设置为远程：true。

这表示使用ajax提交表单而不是按照表单操作。

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

2 个答案: