Mysql Ajax-将值从textarea插入数据库

大家好，为了进一步了解ajax，我试着制作了一个文本区，在这个文本区中，文本被提交并发送到数据库，我还制作了一个按钮来显示数据库中的所有内容，效果很好。但是，当单击“全部显示”按钮提交时，它只给出此值

[object HTMLTextAreaElement]

以下是我的代码：

选择代码/显示

ToDo: <textarea width='200px' height='300px' id='todo'></textarea>

<p id='dbinfo'>Info goes here</p>

<button id='btn'> Send </button>

<button id='request'> Request </button>

<script>
    document.getElementById('btn').onclick = function()
    {
       var dbinfo = document.getElementById('todo').value;


        alert(todo); //Here it gives a object htmlcollection ?

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function()
        {
            alert(xmlhttp.readyState + " | " + xmlhttp.status);
            var text = xmlhttp.responseText;
            alert(text); 
            document.getElementById('dbinfo').innerHTML = text;
        }

        xmlhttp.open("POST", "linktodata", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("todo=" +todo);

    }

    document.getElementById("request").onclick = function()
    {
        alert("event works");
        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                var result = xmlhttp.responseText;
                alert(result);

                document.getElementById("dbinfo").innerHTML = result; 
            }            
        }  

        xmlhttp.open("POST", "linktorequest", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send();       
    }
</script>

待办事项：

信息在这里

发送 要求 document.getElementById（'btn'）。onclick=function（） { var dbinfo=document.getElementById（'todo'）.value； 警报（todo）；//这里它给出了一个对象htmlcollection？ var xmlhttp=new XMLHttpRequest（）； xmlhttp.onreadystatechange=函数（） { 警报（xmlhttp.readyState+“|”+xmlhttp.status）； var text=xmlhttp.responseText； 警报（文本）； document.getElementById（'dbinfo'）。innerHTML=text； } open（“POST”，“linktodata”，true）； setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）； xmlhttp.send（“todo=“+todo”）； } document.getElementById（“请求”）.onclick=function（） { 警报（“事件工作”）； var xmlhttp=new XMLHttpRequest（）； xmlhttp.onreadystatechange=函数（） { if（xmlhttp.readyState==4&&xmlhttp.status==200） { var result=xmlhttp.responseText； 警报（结果）； document.getElementById（“dbinfo”）.innerHTML=result； } } open（“POST”，“linktorequest”，true）； setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）； xmlhttp.send（）； } 数据代码

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $databasename = "blok-1-am1a";

    try
    {
        if (isset($_POST['todo']))
        {
            $connection = new PDO("mysql:host=".$servername.";dbname=".$databasename, $username, $password);
            $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            $statement = $connection->prepare("INSERT INTO `database` (`id`, `item`) VALUES (NULL, :item)");
            $statement->bindParam(':item', $_POST['todo']);

            $statement->execute();
        }

    }
    catch(PDOException $e)
    {
        echo "Error occured : ".$e->getMessage();


    }




    echo "Success";   
?>

    <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $databasename = "blok-1-am1a";

        try
        {
                $connection = new PDO("mysql:host=".$servername.";dbname=".$databasename, $username, $password);
                $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

                $statement = $connection->prepare("SELECT * FROM `database` ");
                $statement->bindParam(':id', $id);


                $statement->execute();

                $result = $statement->setFetchMode(PDO::FETCH_ASSOC);

                $data = "";
                foreach($statement->fetchAll() as $key => $value)
                {
                        $data .= $value['id']." | ".$value['item']."<br>"; 
                }
        }
        catch(PDOException $e)
        {
                echo "Error occured: ".$e->getMessage();


        }

        echo $data;


?>

请求代码

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $databasename = "blok-1-am1a";

    try
    {
        if (isset($_POST['todo']))
        {
            $connection = new PDO("mysql:host=".$servername.";dbname=".$databasename, $username, $password);
            $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            $statement = $connection->prepare("INSERT INTO `database` (`id`, `item`) VALUES (NULL, :item)");
            $statement->bindParam(':item', $_POST['todo']);

            $statement->execute();
        }

    }
    catch(PDOException $e)
    {
        echo "Error occured : ".$e->getMessage();


    }




    echo "Success";   
?>

    <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $databasename = "blok-1-am1a";

        try
        {
                $connection = new PDO("mysql:host=".$servername.";dbname=".$databasename, $username, $password);
                $connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

                $statement = $connection->prepare("SELECT * FROM `database` ");
                $statement->bindParam(':id', $id);


                $statement->execute();

                $result = $statement->setFetchMode(PDO::FETCH_ASSOC);

                $data = "";
                foreach($statement->fetchAll() as $key => $value)
                {
                        $data .= $value['id']." | ".$value['item']."<br>"; 
                }
        }
        catch(PDOException $e)
        {
                echo "Error occured: ".$e->getMessage();


        }

        echo $data;


?>

所以，是的，无论我做什么，请求代码都是有效的，但是当我提交时，我总是得到

[object htmltextraelement]

愚蠢的我，这是一个非常简单的修复，我犯了一个错误，使用了与我的

标记相同的var，所以修复通常会将其更改为todo，并且一切正常

ToDo: <textarea width='200px' height='300px' id='todo'></textarea>

<p id='dbinfo'>Info goes here</p>

<button id='btn'> Send </button>

<button id='request'> Request </button>

<script>
    document.getElementById('btn').onclick = function()
    {
       var todo = document.getElementById('todo').value; //This needed to be changed into todo
    }

待办事项：
信息在这里
发送
要求
document.getElementById（'btn'）。onclick=function（）
{
var todo=document.getElementById（'todo'）.value；//需要将其更改为todo
}
这里要做什么
xmlhttp.send（“todo=“+todo）
我想您需要发送todo值进行保存。这是从todo文本区域读取的值