如何使用AJAX打印PHP POST数据?(没有jQuery）

How can I print PHP POST data using AJAX? (no jQuery)

本文关键字：没有 jQuery 数据 POST 何使用 AJAX 打印 PHP      更新时间：2023-09-26

所以基本上我已经有了这个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;
        }
    }
}

我正在尝试在表单中输入颜色，点击submit，然后使用AJAX将PHP打印到HTML中的"showoutput"div。我已经尝试了我能想到的一切，但都没能解决。

我认为这是不对的。Ajax不需要表单提交功能，

我确实喜欢这个，我想你想要它。

<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>
相关文章：