javascript - My JQuery Ajax call gives error: EXPECTED POST

Question

I get an 'EXPECTED POST' error in my console when I click the button. console.log(data) is highlighted yellow. Presumably there is a JSON problem, but I could not find it.

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

The error means that the server side endpoint is expecting a POST request, yet you're sending a GET (as that's the jQuery $.ajax default). To fix this just add type: 'POST' to the settings.

Also note that you can use jQuery's html() method instead of creating a jQuery object, getting an Element from it then updating the innerHTML. Try this:

var success_callback = function(data) {
  console.log(data);
  $('#results').html(data);
}

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