[Solved] XHR failed loading: POST

so I am trying to post with ajax, and it just wont go through.

here is my javascript

$.ajax({
      type: 'POST',
      contentType: "",
      url: 'some url',
      data: order,
      dataType: 'json',
      success: function() {
        Materialize.toast('Order added successfully', 4000, 'android-success');
        console.log('order posted');

      },


      error: function() {
        Materialize.toast('Something went wrong', 4000, 'android-error');
      }

    }); // $.ajax post

I am not getting an error nor am I getting a success from ajax. But I am getting a chrome console error listed above XHR failed loading: POST

I have tried setting content type and data type to no avail. My guess, the problem is in the object format or something of that sort.

Probably useful information —
this is a basic outline of my code.

  1. I have a button with on click event
  2. in that function i have if else statement
  3. if the input fields are blank event.preventdefault() the button click
  4. else ajax post

This is the info under the failed log

send    @   jquery-3.1.0.js:9392

ajax    @   jquery-3.1.0.js:8999

(anonymous function)    @   ajax.js:20

mightThrow  @   jquery-3.1.0.js:3508

process @   jquery-3.1.0.js:3576

Any help on this matter really appreciated.

Solution #1:

I got it to work. The problem was with the page reloading. So before the post request could go through the web page would reload which resulted in no error but just a failed log. Ugh, such a rookie mistake.

Respondent: ivan marchenko

Solution #2:

Old question I know but if it comes up on google search it is still relevant.

when the window is loaded add an event listener for the for and prevent the default action.

 <script>
 window.addEventListener("load", function () {
     //not jquery!
            // Access the form element...
            var form = document.getElementById("myFormId");

            // ...and take over its submit event.
            form.addEventListener("submit", function (event) {
                event.preventDefault(); // prevent form submission and reloading the page.

                //your code to validate or do what you need with the form.
            });
});
</script>
Respondent: screamin

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.