XMLHttpRequest发布空的正文

Question

When I try to post some data to my backend API service I use the XMLHttpRequest object, but when I try to send the data with ajax.send it sent nothing to the server

Code snipper:

ajax = new XMLHttpRequest();
ajax.open("POST", "https://someapi.com",true);
ajax.send({
  name: "Name",
  phone: "123468375698563897569575863"
});

ajax.onreadystatechange = function(){

    if(ajax.readyState==4){
        JSONback = JSON.parse(ajax.response);
        console.log(JSONback);
    }
};

Answer 1

You cannot directly send a JS object over the wire.

You need to convert it to a string first, just like you need to parse it when you're getting it back.

ajax = new XMLHttpRequest();
ajax.open("POST", "https://balbalbal.com", true);
ajax.send(
  JSON.stringify({
    name: "Name",
    phone: "123468375698563897569575863"
  })
);

ajax.onreadystatechange = function(){
  if(ajax.readyState==4){
    JSONback = JSON.parse(ajax.response);
    console.log(JSONback);
  }
};

The simplest PHP test code on the server side would be:

<?php
  echo file_get_contents('php://input');
?>

And here is a slightly more advanced example that will decode it, add a new field and send it back:

<?php
  $json = file_get_contents('php://input');
  $object = json_decode($json);
  $object->id = 123;

  echo json_encode($object);
?>

Answer 2

You need to:

1. Say you are sending JSON
2. Convert your JavaScript data structure into JSON

Such:

var data = {
    name: "Name",
    phone: "123468375698563897569575863"
};

var json = JSON.stringify(data);

var ajax = new XMLHttpRequest();
ajax.open("POST", "https://balbalbal.com", true);
ajax.setRequestHeader("Content-Type", "application/json");
ajax.send(json);