How do I change GET method to POST method using php and ajax

Question

I changed the GET methods into POST in php and ajax files but the logical error here is that every time I add a student into the database it doesn't work. I can't really figure out the problem because I'm new to AJAX.

Here's my code:

php file for adding

<?php
//I changed to POST
$q1=$_POST["q1"];
$q2=$_POST["q2"];
$q3=$_POST["q3"];

$con = mysql_connect('localhost', 'root', '');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("stud", $con);

$sql="INSERT INTO stud_info(IDno, LName, FName) VALUES ('$q1', '$q2', '$q3')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }


mysql_close($con);
?>

getting the stud id

<?php

$q=$_POST["q"]; //I changed to POST

$con = mysql_connect('localhost', 'root', '');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("stud", $con);

$sql="SELECT * FROM stud_info WHERE IDno like '".$q."%'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>IDno</th>
<th>LName</th>
<th>FName</th>
</tr>";

while($row = mysql_fetch_array($result))
 {
 echo "<tr>";
 echo "<td>" . $row['IDno'] . "</td>";
 echo "<td>" . $row['LName'] . "</td>";
 echo "<td>" . $row['FName'] . "</td>"; 
 echo "</tr>";
 }
echo "</table>";

mysql_close($con);
?>

JavaScript for ajax It doesn't work very well

// JavaScript Document
var xmlHttp;

function showStud(id)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="getStud.php";
    url=url+"?q="+id;   
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function addStud(id, ln, fn)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="addStud.php";
    url=url+"?q1="+id+"&q2="+ln+"&q3="+fn;  
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function editStud(id, ln, fn)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="editStud.php";
    url=url+"?q1="+id+"&q2="+ln+"&q3="+fn;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function deleteStud(id)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="deleteStud.php";
    url=url+"?q="+id;   
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("POST",url,true);
    xmlHttp.send(null);
}

function stateChanged() 
{ 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    { 
        document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
    } 
}

function GetXmlHttpObject()
{
    var xmlHttp=null;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        //Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

Answer 1

There are few things I would like to point out. First you are executing the function stateChanged here:

xmlHttp.onreadystatechange=stateChanged;

and assigning the RESULT of that function (which in this case is undefined) to xmlHttp.onreadystatechange.

Now, when the readystate changes, XMLHttpRequest attempts to call onreadystatechange which is now undefined, so nothing will happen.

Try this:

function stateChanged(){
    return function(){
        if(xmlHttp.readyState==4){
            if (xmlHttp.status==200){
                document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
            }

        }
    }
}

Now, you are still assigning the result of the function to http.onreadystatechange, but this time it is a callable function instead of undefined.

And second, to POST data like an HTML form, add an HTTP header with setRequestHeader(), and specify the data you want to send in the send() method, like this:

// Example of deleteStud(id) function
var url="deleteStud.php";
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange=stateChanged();
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("q="+id);

Edited:

For example, your showStud function would be like this,

function GetXmlHttpObject(){
    // your code
}

function stateChanged(){
    return function(){
        if(xmlHttp.readyState==4){
            if (xmlHttp.status==200){
                document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
            }

        }
    }
}

function showStud(id)
{ 
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null){
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="getStud.php";
    xmlHttp.open("POST",url,true);
    xmlHttp.onreadystatechange=stateChanged();
    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlHttp.send("q="+id);
}

So change your other functions accordingly.

Re-edited:

There are few additional key things you need to know.

1) The correct order of calls is:

• new XMLHttpRequest
• xmlHttp.open()
• xmlHttp.onreadystatechange = ...
• xmlHttp.send()

In some browsers, calling .open clears any event handlers on it. This allows for clean re-use of the same xmlHttp object, which is supposedly more memory-efficient (but that really doesn't matter if you code properly to let the GC do its job). So, simply put the .open call before the onreadystatechange assignment and you should be good to go.

2) onreadystatechange isn't just fired once. It's fired multiple times, you need to be able to handle that. These are the codes you need to handle:

• 0 UNSENT - open()has not been called yet

• 1 OPENED - send()has not been called yet

• 2 HEADERS_RECEIVED - send() has been called, and headers and status are available

• 3 LOADING Downloading - responseText holds partial data

• 4 RESPONSE is ready - The operation is complete

Hence your error check should be inside the xmlHttp.readyState==4 check, like this:

if(xmlHttp.readyState==4){
    if (xmlHttp.status==200){
        // your code
    }

}