Data not getting passed via Ajax to PHP script

Question

I'm trying to send the value of a variable number via ajax to a PHP script. But the PHP script is not printing the desired output on opening on a browser. Tried but couldn't find whats wrong here. Any pointers ?

index.html

<button type="submit" class="btn btn-success" id = 'first' onclick='process();'>Submit</button>

<script>

var number = 0;

function process()
{
    number++;

    var xhr;

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    var data = "num=" + number;
    xhr.open("POST", "index.php", true);
    xhr.send(data);
}     
</script>

index.php

<?php
session_start();
$number = $_POST['num'];
$_SESSION['numb'] = $number;
echo $_SESSION['numb'] ;
?>

Answer 1

Editing my long winded lame answer since you fixed the close curly bracket... but bloodyKnuckles is right you also need something in your 'process' function to take the response from your PHP page and output it... or whatever you want to do. You can basically use the method 'onreadystatechange' in the XMLHttpRequest object and then look for a 'readyState' property value of 4 which means everything is done. Here is a simple example of that just outputting the results to the console (which you can view using developer tools in your browser of choice).

<script>

var number = 0;

function process()
{
number++;

var xhr;

 if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

var data = "num=" + number;
xhr.onreadystatechange = function(){            

  if (xhr.readyState==4 && xhr.status==200){
          console.log('xhr.readyState=',xhr.readyState);
          console.log('xhr.status=',xhr.status);
          console.log('response=',xhr.responseText);               
  }

  else if (xhr.readyState == 1 ){
    xhr.send(data)

  }

};

xhr.open("POST", "ajax-test.php", true);

}
</script>

As you go further you may want to update your PHP page to only update the session when the POST value is there.

<?php
//ini_set('display_errors',1);
//ini_set('display_startup_errors',1);
//error_reporting(-1);
if(isset($_POST['num'])){
            session_start();
    $_SESSION['numb'] = $_POST['num'];
    echo $_SESSION['numb'];
}
?>

You can uncomment those ini_set and error_reporting lines to try to figure out what is going on with your PHP script.

Answer 2

This is because you are not sending header information with request...

Append this code

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", data.length);
xhr.setRequestHeader("Connection", "close");

after

xhr.open("POST", "index.php", true);