如何使用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>