如何使用AJAX打印PHP POST数据？ （没有jQuery）

Question

所以基本上我有这个HTML。

<form method="post" id="myform" onsubmit="getData()"> 
<fieldset> 
<legend>Form</legend> 
<label>Color: <input type='text' id="color" name='color'></label> 
<label><input type="submit"></label> 
</fieldset> 
</form> 
<div id="showoutput"> 

</div> 

这个PHP：

<?php 
$color = $_POST['color']; 

    if($color != "") 
    { 
    $color = htmlentities($color, ENT_QUOTES); 
    print "<p>The color is $color</p>"; 
    } 
    else 
    { 
    print "<p>Fill out form!</p>"; 
    } 

?> 

而且这个JS：

window.onload = getData; 

var req = new XMLHttpRequest(); 

function getData() 
{ 
var poststr = "color=" + encodeURI(document.getElementById("color").value); 

req.open("POST", "lab11-1.php", true); 
req.onreadystatechange = useResponse; 
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

req.send(poststr); 

} 

function useResponse() 
{ 
    if(req.readyState == 4) 
    { 
     if(req.status == 200) 
     { 
     document.getElementById('showoutput').innerHTML = req.responseText; 
     } 
    } 
} 

我想能够输入形式一种颜色，点击提交，并使用AJAX将PHP打印到我的HTML中的“showoutput”div。我已经尝试了所有我能想到的并且一直无法解决的问题。

Answer 1

我认为这是不正确的。 阿贾克斯不需要表单提交功能，

我确实这样做，我想你想要它。

<form method="post" id="myform"> 
<fieldset> 
<legend>Form</legend> 
<label>Color: <input type='text' id="color" name='color'></label> 
<label><input type="button" onclick="getData()" value="submit"></label> 
</fieldset> 
</form> 
<div id="showoutput"> 

</div> 
<script> 
window.onload = getData; 

var req = new XMLHttpRequest(); 

function getData() 
{ 
var poststr = "color=" + encodeURI(document.getElementById("color").value); 

req.open("POST", "test.php", true); 
req.onreadystatechange = useResponse; 
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

req.send(poststr); 

} 

function useResponse() 
{ 
    if(req.readyState == 4) 
    { 
     if(req.status == 200) 
     { 
     document.getElementById('showoutput').innerHTML = req.responseText; 
     } 
    } 
} 
</script>