基本的Ajax，但无法使用GET或POST方法

我知道那里有很多教程和相同的问题，但我已经尝试了很多次，并且Ajax无法使用。 PLZ纠正我的脚本：这里的index.php基本的Ajax，但无法使用GET或POST方法

<?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>&nbsp;</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>'; 
?>

，这里是ajax.php是采取两个变量，乘以他们和呼应的结果，但我的网页refreses并没有看到任何东西

<?php 
    $num1=$_POST["num1"]; 
    $num2=$_POST["num2"]; 

    $result=$num1*$num2; 
    echo $result; 
?>

来源

2012-09-26 Muhammad Arslan Jamshaid

您的HTML文档格式不正确。开始的'head'和最后的'body'不可用。 – Frankline

发生这种情况是因为function ajax()不返回任何内容，因此表单继续提交。

添加功能之前结束return false;

正确的代码：

<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>&nbsp;</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>

来源

2012-09-26 09:31:45

好的，谢谢现在页面不刷新，但我不期望结果结果输入标签 –

那是因为你没有发送发布数据，检查更新的答案 –

谢谢，现在我明白什么是ajax :) –

请check my answer here就在php和mysql使用AJAX的类似线路的问题。希望有所帮助。它详细解释了完整的代码。

其中很多也适用于此。

希望这会有所帮助。

来源

2012-09-26 09:34:58 mtk

我可以'用这种方式理解，那里有大量的教程，你们请纠正我的脚本，我会得到我做错的地方，因为我是AJAX的恶棍 –

基本的Ajax，但无法使用GET或POST方法

回答

相关问题