I wanted to know why I can get the parameters of the verbs POST, PUT and DELETE in PHP only with Jquery, how do I do this pure JS?

Question

I wanted to know how I send parameters of the methods: POST, PUT, DELETE as Jquery does

For you to understand better, I just want to send some data and take PHP. If you look below you can see that in the output with pure JS it returns "null", and I want to return "{status: "Success", dates: "[{"name":"milestones"}]"}" like Jquery does, so the question is: "How do I return the same value as in Jquery?" (No need to touch the backend)

// Without JQuery

const xhr = new XMLHttpRequest()
const data: any = { name: 'marcos' }

xhr.responseType = 'json'
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    console.log(xhr.response) // output: null
  }
}
xhr.open(
  'post',
  'http://localhost/projetos/linguagens/PHP_api-rest/params/ajax/testAjax'
)

xhr.send(data)

// With JQuery

$.ajax({
  method: 'post',
  dataType: 'json',
  data: { name: 'marcos' },
  url: 'http://localhost/projetos/linguagens/PHP_api-rest/params/ajax/testAjax',
  success: function (response) {
    console.log(response) // output: {status: "success", datas: "[{"name":"marcos"}]"}
  },
})

I’m trying to get a $_POST parameter in PHP

// Server
public function post() {
    return json_encode(['name' => $_POST['name']]);
}

To make it more readable I left an image: https://i.stack.Imgur.com/X0acr.png

Answer 1

You need to serialize your object to send it doing xhr.send(JSON.stringify(data)).

The documentation can be found at https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send.

PS: when you want to know exactly what/how jQuery does you can check their source directly on Github: https://github.com/jquery/jquery.