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=="plete")
{
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;
}
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=="plete")
{
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;
}
- do you mean there is plexity due to $_POST and $_GEt method conflicting? – PRANAV Commented Nov 23, 2015 at 11:51
- I want to change all the GET methods into POST methods and I want to only run the site using the POST methods – Jude Howell Sarabia Commented Nov 23, 2015 at 11:54
- I works we'll using GET method but It doesn't work well using POST method so that is the problem. – Jude Howell Sarabia Commented Nov 23, 2015 at 11:55
- I think the problem here is in the javascript file – Jude Howell Sarabia Commented Nov 23, 2015 at 11:58
- 1 Possible duplicate of AJAX XMLHttpRequest POST – Andreas Commented Nov 23, 2015 at 12:00
4 Answers
Reset to default 2There 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 XMLHttpRequestxmlHttp.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 plete
Hence your error check should be inside the xmlHttp.readyState==4 check, like this:
if(xmlHttp.readyState==4){
if (xmlHttp.status==200){
// your code
}
}
POST method via JS XMLHttpRequest pared to GET is a bit different.
Just a quick untested example:
GET
url=url+"?q1="+id+"&q2="+ln+"&q3="+fn;
xmlHttp.open("GET",url,true);
xmlHttp.send();
POST
url=url; // stays the same
xmlHttp.open("POST",url,true);
xmlHttp.send(q1="+id+"&q2="+ln+"&q3="+fn); // params go into .send()
You can find working examples at w3schools.
Based on your source
- addStud function is missing xmlHttp.setRequestHeader
- and xmlHttp.send string is missing & connecting parameters
like so:
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("q1="+id+"&q2="+ln+"&q3="+fn);
Undefined index: q in the $q=$_POST["q"]; in the php file
Maybe because you are using q1 in your php file while on the javascript file you are using q only or vice versa. Make it the same and it should work fine.
And don't forget to add this before xmlHttp.send :
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
You changed your requests to post - but it seems that you didn't change the placement of your paramters. You still attach them to your url:
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
You send "null" in the request body.
You will need to send the paramters in the body to make it work as expected by you. Refer to this: http://www.w3schools./ajax/ajax_xmlhttprequest_send.asp for further information.
Edit: Small (non-tested) Example:
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("q=test?data=asd?moredata=das");
Update: Since you attached the dropbox folder / content I tried it.
You are still missing the essential function seRequestHeader as listed above. After adding this i am able to read the POST data.
Example for your code:
xmlHttp.open("POST","getStud.php",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("q="+id);
IMPORTANT: The seRequestHeader function needs to be called AFTER the open function and BEFORE the send function.
Endpoint dumps the POST variable and displays content as proof that it works
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745381205a4625235.html
评论列表（0条）