XMLHttpRequest can't receive the response data from php

[zhuceyouxiang88]

Hi guys!

I am using XMLHttpRequest to send data to php, My php can receive the data from ‘xhr.send’,
but, after my php finished its jobs and responded to my xhr, I found the xhr couldn’t receive the responded data correctly.

My js:
…

       var xhr = new XMLHttpRequest();
		 xhr.onload = function (Result) {
			if (Result.Status == 1) {
         //alert(details.payer.name.given_name  + '付款成功！');
		 console.log('OK');
			}
			 else if(Result.Status == 2){
				 //alert('付款失败。');
				 console.log('Failed');
			 }
  }
         xhr.open('POST', WebsitePath + '/payment_consultation/' + order_id);
		 //xhr.setrequestheader( content-type application/x-www-form-urlencoded );
         xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
         xhr.send(JSON.stringify(details));

…

My php:

…

if(...){
...
	$DB->CloseConnection();
	echo json_encode(array('Status'=>'1'));

}

else{
	echo json_encode(array('Status'=>'2'));
}

…

I can get a ‘Status: “1”’ on my chrome, but how to capture the value of 1 or 2 after the xhr finished successfully?

I know I can do things like this in jquery ajax,
…

success: function (Result) {
			if (Result.Status == 1) {
                           do something;
				}
}

…
But, how to do the same thing in javascript XMLHttpRequest?

[m_hutley]

are you setting the content type of the return in your PHP?

Normally you listen to onreadystatechange of your XHR, wait for it to change to state 4 (“I’m done”), and then read the xhr.response.

[m_hutley]

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
       console.log(xhr.response.Status); 
    }
  }

[zhuceyouxiang88]

Hi m_hutley

...
         var xhr = new XMLHttpRequest();
		 xhr.onreadystatechange = function() {
         if (xhr.readyState === 4) {
         console.log(xhr.response.Status); 
    }
  }
         xhr.open('POST', WebsitePath + '/payment_consultation/' + order_id);
         xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
         ....
});

The 'console.log(xhr.response.Status); ’ gave me an undefined.

[m_hutley]

and what do you get if you console.log(xhr.response) ?

[zhuceyouxiang88]

@m_hutley

 xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
       console.log(xhr.response.Status); 
    }
  }

The console.log(xhr.response) gave me a {“Status”: “1”},
but I have to get the “1”,
The console.log(xhr.response.Status) gave me an undefined.

[m_hutley]

looks like your server returned a string and didnt flag it as JSON. (This is why I asked you in post #2 if you were setting the content type).

If the response is a string, JSON.parse it, or change the content type of the server’s response, and it should work.

[zhuceyouxiang88]

I think you are right,
My php encoded a json by:
echo json_encode(array('Status'=>'1'));

but, after I changed my js to:

var xhr = new XMLHttpRequest();
		  xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
          console.log(JSON.parse(xhr.response.Status));

It gave me an error:

[m_hutley]

xhr.response.Status is undefined. So it choked on the u in undefined because it converted undefined to a string first.

parse the response.

[zhuceyouxiang88]

It worked.
Thank you so much!
The entire code should be this:

   var xhr = new XMLHttpRequest();
		  xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
          var JsonStatus = JSON.parse(xhr.response);
          console.log(JsonStatus.Status);		  
    }