在POST之后更新并回显给JS的PHP变量仍然为null

Question

I have an HTML button that once a user presses it , it preforms the following POST (to the same issue.php page):

var params = "Bloodtype=" + encodeURIComponent(Bloodtype);
var url = "issue.php?" +params;
var request = new XMLHttpRequest();
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function() 
{
    if(request.readyState == 4 && request.status == 200) 
    {
        checkDoner();
    }
}
request.send(params);

Once the request has been made, PHP code goes on checking the database for a match - if there is a match I set a php variable isDoner = 1, else isDoner=0.

The function checkDoner() echos the PHP var isDoner and checks for its value - and by that value I need to show/hide a certain div in the html code.

I have checked all PHP var values after the post - they all have the values that they should have - the problem is when I pass them to JS they are always null.

This is the checkDoner() function :

function checkDoner()
{
    var isDoner = "<?=json_encode($isDoner) ?>";
    if(isDoner == null)
    {
        console.log("In isDoner 1");
        document.getElementById('positiveAnswer').style.display = 'none';
        document.getElementById('negativeAnswer').style.display = 'none';
    }
    else if(isDoner == '0'){
        console.log("In isDoner 2,DONER :" + isDoner);
        document.getElementById('negativeAnswer').style.display = 'block';
    }
    else if(isDoner == '1'){
        console.log("In isDoner 3");
        document.getElementById("pName").innerHTML = "<? echo json_encode($doners['Name']) ?>";
        //$doners array is initiated to null and gets values after post
        document.getElementById("pId").innerHTML =  "<? echo json_encode($doners['Id'])?>";
        document.getElementById("pBloodtype").innerHTML = "<?echo json_encode($doners['Bloodtype'])?>";
         //document.getElementById("pName").innerHTML = <?=json_encode($doners['Name'])?>;
         //document.getElementById("pId").innerHTML = <?=json_encode($doners['Id'])?>;
        //I tried both ways
        document.getElementById('positiveAnswer').style.display = 'block';
    }
}

Answer 1

In issue.php page, just like chris said you can detect if request is ajax or not, via header or you can also do this by sending a get parameter 'ajaxRequest=1'. And when 'ajaxRequest' is set in $_GET, you need to echo only json object and exit.

Your issue.php would look something like this

if(!empty($_GET["ajaxRequest"])) {
  $data = array();
  ..... your code to get insert values in $data ....
  ..... add $data["isDoner"] = YOUR VALUE .....
  ..... add $data["donors"] = YOUR ARRAY .....
  echo json_encode($data);
  exit();
}

Remember, when you send an ajax request, your entire php code runs on server and whatever data you echo or whatever data you write outside php blocks (< ?php ?>), will be received by browser which you can access through 'request.responseText', where request is XMLHttpRequest object.

Your js should look like this

var params = "Bloodtype=" + encodeURIComponent(Bloodtype) + "&ajaxRequest=1";
var url = "issue.php?" +params;
var request = new XMLHttpRequest();
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function() 
{
    if(request.readyState == 4 && request.status == 200) 
    {
        checkDoner(request.responseText);
    }
}
request.send(params);

function checkDoner(response)
{
    var isDoner = null, donors=null;
    try {
      response = JSON.parse(response);
      isDoner = response.isDoner;
      donors = response.donors;
    }
    catch(e){  }

    if(isDoner == null)
    {
        console.log("In isDoner 1");
        document.getElementById('positiveAnswer').style.display = 'none';
        document.getElementById('negativeAnswer').style.display = 'none';
    }
    else if(isDoner == '0'){
        console.log("In isDoner 2,DONER :" + isDoner);
        document.getElementById('negativeAnswer').style.display = 'block';
    }
    else if(isDoner == '1'){
        console.log("In isDoner 3");
        document.getElementById("pName").innerHTML = donors.Name;
        //$doners array is initiated to null and gets values after post
        document.getElementById("pId").innerHTML =  donors.Id;
        document.getElementById("pBloodtype").innerHTML = donors.Bloodtype;
         //document.getElementById("pName").innerHTML = donors.Name;
         //document.getElementById("pId").innerHTML = donors.Id;
        //I tried both ways
        document.getElementById('positiveAnswer').style.display = 'block';
    }
}