Basic Ajax but not working with either GET or POST method
Question
I know there are very tutorials out there and same questions as well, but I have tried many times, and ajax didn't work. plz correct my script: here is index.php
<?php
echo'
<script type="text/javascript">
function ajax()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","ajax.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<p> </p>
<form id="form1" name="form1" method="post" action="" onsubmit="return ajax()">
<p>
<label for="num2">number 1</label>
<input type="text" name="num1" id="num2" />
*
<label for="num3">number 2</label>
<input type="text" name="num2" id="num3" />
=
<label for="result">Result</label>
<input type="text" name="result" id="result" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>';
?>
and here is ajax.php that is taking two variables and multiplying them and echoing the result, but my page refreses and didn't see anything
<?php
$num1=$_POST["num1"];
$num2=$_POST["num2"];
$result=$num1*$num2;
echo $result;
?>
2 answers
solution1
1 ACCPTED 2012-09-26 09:31:45
This happens because function ajax() does not return anything so the form continues to submit.
Add before function ends return false;
Correct code:
<html>
<head>
<script type="text/javascript">
function ajax(){
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("result").value=xmlhttp.responseText;
}
}
var params = "num1="+document.getElementById('num2').value+"&num2="+document.getElementById('num3').value;
xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
return false;
}
</script>
</head>
<body>
<p> </p>
<form id="form1" name="form1" method="post" action="" onsubmit="return ajax()">
<p>
<label for="num2">number 1</label>
<input type="text" name="num1" id="num2" />
*
<label for="num3">number 2</label>
<input type="text" name="num2" id="num3" />
=
<label for="result">Result</label>
<input type="text" name="result" id="result" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>
solution2
0 2012-09-26 09:34:58
Please check my answer here to a question on similar lines of using ajax in php and mysql . Hope that helps. It explains the complete code in detail.
Much of it is also applicable here.
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.