Question

我正在研究RoR和JavaScript项目，并且正在使用AJAX请求提交表单。我在提交时有POST请求，但最初是在执行GET请求。表单正在清除，页面重新加载。

网址从http://localhost:3000/beers变为http://localhost:3000/beers?utf8=%E2%9C%93&authenticity_token=HVoHQ8WEZdIfVEvBcWJU5XT0dIiV2QL0B%2B2XeaY5m9g69A4yYWFxmx%2B4qiv2qPqx%2BJe3pphvtGT0oZhlWNTw3A%3D%3D&beer%5Bname%5D=Fat+Tire&beer%5Bbrewery_attributes%5D%5Bname%5D=New+Belgium+Brewing+Company&beer%5Bbeer_type%5D=Red+Ale+-+American+Amber+%2F+Red&beer%5Bibu%5D=22&beer%5Babv%5D=5.2%25&commit=Create+Beer。

我再次按Submit（使用空白表格），然后它执行POST请求并按应有的方式工作。 它并非每次都这样做，这确实让我感到困惑。我已经清除了Cookie，重新启动了服务器，并尝试了其他浏览器。没有人能解决这个问题。如果有人有任何见识，我将非常感谢您的帮助。提前致谢。

我的AJAX请求：

$(function() {
    // new beer request
    $('#new-beer-form').on("submit", function(e) {
        $.ajax({
            url: this.action,
            method: "POST",
            data: $(this).serialize(),
            success: function(response) {
                var $ol = $("div.beers ol")
                $ol.append(response);
            },
            error: function(response) {
                alert("Please fill out all criteria.");
            },
        });
        e.preventDefault();
    })
})

Answer 1

我认为您应该将e.preventDefault（）移到on.Submit函数的回调的最开始。在ajax请求之前。我认为正在发生的事情是没有及时阻止默认操作（发送get请求）。

Answer 2

您可以验证用于提交的按钮是否定义为<button>？如果是，则它应具有属性type="button"，因为它将默认为单击时的"submit"操作，如下所示：

What's the point of <button type="button">?

Answer 3

因此，问题似乎出在我的gemfile中。我本不应该使用turbolinks宝石。一旦我完成了将其从项目中删除的必要步骤，它便开始正确，持续地工作。

对于遇到类似问题的任何人，以下是有关该主题的非常有用和直接的文章：http://codkal.com/rails-how-to-remove-turbolinks/。

感谢所有帮助我的人。

AJAX-“ POST”请求首先执行“ GET”请求，然后执行“ POST”请求

3 个答案: