'ERROR: Expect post' after making an AJAX request

Question

This form is submitted via AJAX, but there are a couple of bugs preventing that from working. How can I use my Chrome browser's console to fix it? The error is:

ERROR: Expect post.

<button type="button" onclick="alert('Form is broken');">Submit</button>
<h3>Results:</h3>
<div id='results'></div>

var success_callback = function(data) {
  console.log(data);
  $('#results')[0].innerHTML = data;
}

$('button').click(function() {
  $.ajax('ajax.php', {
    data: {
      submission: JSON.stringify({
        prop: $('text_area').val()
      })
    },
    success: success_callback
  });
});

Answer 1

When you send a request over the internet you need to define a request method: Post, Get, Put, Delete. Looking at the docs for jQuery.ajax I see that it has a different opinion on how the ajax function should be populated.

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    success_callback(msg)
  });

You should also utilize Promises on asynchronous operations so that your code runs more efficiently.