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

Question

I am working on a RoR and JavaScript project and am using an AJAX request to submit a form. I have a POST request on submit, but it is performing a GET request at first. The form is clearing and the page reloads.

The url changes from http://localhost:3000/beers to 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 .

I press submit once again (with an empty form) and then it performs the POST request and works as it should. It doesn't do this every single time , which is what is really confusing me. I have cleared my cookies, restarted my server, and tried a different browser. None have fixed the issue. If anyone has any insight, I'd greatly appreciate the help. Thanks in advance.

My AJAX request:

$(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

I think that your e.preventDefault() should be moved to the very beginning of the on.Submit function's callback. Before the ajax request. I think what is happening is that the default action (sending a get request) is not prevented in time.

Answer 2

Can you verify if the button you are using to submit defined as <button> ? If yes, it should have attribute type="button" , since it will default to "submit" action on click, as being replied here:

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

Answer 3

So, it appears that the issue lied within my gemfile. I was utilizing the turbolinks gem when I shouldn't have been. As soon as I went through the necessary steps to remove it from my project, it began working correctly, consistently.

For anyone that has a similar issue, here is a really helpful and straightforward article in regards to the topic: http://codkal.com/rails-how-to-remove-turbolinks/ .

Thank you to everyone that helped me.