jQuery AJAX POST to PHP works, XMLHttpRequest doesn't

Question

I'm currently refactoring some of my previous code to move away from jQuery's AJAX function towards XMLHttpRequest in vanilla JS. From my understanding, the following code blocks should be identical. However, while the jQuery version works, XMLHttpRequest doesn't. If successful, you should see an array returned by PHP in the network tab in dev tools.

jQuery

$("#submit").click(() => {
  $.ajax({
    type: "POST",
    url: "http://arig.asuscomm.com/mn/PHP/submitNames.php",
    data: {
      first: "Hi!"
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="submit">
Submit
</button>

Vanilla JS

function send() {
  var data = {
    "first": "Hi!"
  };
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://arig.asuscomm.com/mn/PHP/submitNames.php", true);
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  xhr.send(JSON.stringify(data))
}

<button id="submit" onclick="send()">
Submit
</button>

Note that my server is running locally, but I will try to keep it up until my question is answered. And, because my server doesn't have HTTPS quite yet, you might need to send the request from an HTTP source. Thanks!!!

Edit: I'm using code found here.

The two are not the same. The jQuery version is not sending json. It is sending a query string. — Taplar, Jul 31 '20 at 19:24
`http://arig.asuscomm.com/mn/PHP/submitNames.php` with a content-body of `first=Hi!` since it is a POST request — Taplar, Jul 31 '20 at 19:24
I would encourage you to `F12` to open your developer tools, go to the network tab, and inspect the different ajax requests made. You can quickly see any differences that way. — Taplar, Jul 31 '20 at 19:27
jQuery's [`$.ajax` uses `XMLHttpRequest`](https://github.com/jquery/jquery/blob/master/src/ajax/xhr.js#L6) to make its requests by default, BTW. — Heretic Monkey, Jul 31 '20 at 19:32
@HereticMonkey yep, I had heard that, which is why I wanted to switch to something library-less. I misunderstood how jQuery parses the data object though — KPopOG, Jul 31 '20 at 19:34

score 0 · Accepted Answer · answered Jul 31 '20 at 19:26

0

jQuery encodes data using the application/x-www-form-urlencoded data format, not JSON.

You can encode data in that format using the URLSearchParams object.

const data = {
  "first": "Hi!"
};

const params = new URLSearchParams();
Object.entries(data).forEach(
  ([key, value]) => params.append(key, value)
);
const encoded_data = params.toString();

console.log(encoded_data);

answered Jul 31 '20 at 19:26

Quentin

914,110
126
1,211
1,335

This worked perfectly, thank you! I'm going to still look into having my PHP handle JSON instead, as I find the code a bit cleaner. I appreciate your help :D – KPopOG Jul 31 '20 at 19:35

score 0 · Answer 2 · answered Jul 31 '20 at 19:31

Problem is with your server not the data itself as I'm getting the response (it's just an empty array) You can either use the same method for sending data like with ajax and use form-data for which I'm getting the same response as with Ajax

function send() {
  var formData = new FormData();
  formData.append("first", "Hi!");
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "http://arig.asuscomm.com/mn/PHP/submitNames.php", true);
  xhr.send(formData)
}

Or you will need to handle json input on your server

I'm definitely going to look into this, as I'd prefer to send the data as JSON to keep my JavaScript a bit simplier. Thanks! — KPopOG, Jul 31 '20 at 19:35

jQuery AJAX POST to PHP works, XMLHttpRequest doesn't

2 Answers2