XMLHttpRequest can't receive the response data from php

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?

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.

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

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.

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

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.01

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.

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:

02

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

parse the response.

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);		  
    }
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.