jquery - Ajax Select，使用 select 从数据库中获取数据

Question

如何使用以下方法从数据库中获取值:用户在 <select> 中选择 ID(即 1)函数，然后数据显示在 <p> 中标签我有以下内容，我可以使用 <p> 更改文本但由于某种原因我无法从数据库中取出数据

选择代码

<p id="dbinfo" >Data comes here</p>


<select id='slct'>
    <option value='empty'>select a number</option>
    <option value='1'> 1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
</select>

<script>     
    document.getElementById("slct").onfocus = function()
    {
        alert(document.getElementById('slct').value);

        var xmlhttp = new XMLHttpRequest();
        var text = "";
        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                var dbText = xmlhttp.responseText;
                var obj = JSON.parse(); 
                var text;
                var i;
                for(i =0; i < obj.records.length; i++)
                {
                    text += "<option value='" +obj.records[i].id+ "'>" + obj.records[i].id + "</option>";
                }
                document.getElementById('dbinfo').innerHTML = dbText;

            }            
        }
        xmlhttp.open("POST", "http://localhost/somemaps/data.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send();

        document.getElementById("slct").onchange = function(){
            var id = this.children[this.selectedIndex].value;
            document.getElementById("dbinfo").innerHTML = "text has changed: " +id;

            xmlhttp1 = xmlhttpRequest(); 
            xmlhttp.send("id="+id);         
        }
    }


</script>

数据代码

<?php
    //Haal de gegevens uit de database en echo ze naar dit scherm.
    $servername = "localhost";
    $username = "root";
    $password = "";
    $databasename = "blok-1-am1a";

    if(isset($_POST['id']))
    {
        $extra = "WHERE ".$id. " = ".$_POST['id'];
    }
    else
    {
        $extra = "";
    }

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

        $statement = $connection->prepare("SELECT `id`, `firstname`, FROM `db-name` ".$extra);


        $statement->execute();

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

        $data = "";
        foreach($statement->fetchAll() as $key => $value)
        {
            $data .= $value['id']." | ".$value['firstname'];
        }

    catch(PDOException $e)
    {
        echo "Dit is een PDO foutmelding, de volgende fout heeft plaatsgevonden : ".$e->getMessage();


    }

    echo $data;


?>

我在想我应该添加一个值来返回？但这似乎不起作用，所以可能是什么问题？欢迎任何提示/答案(:

编辑

在悬崖响应并将我的代码更改为他的代码后，结果如下:

选择后会发生这种情况:

如前所述，数据库中的所有数据只显示而不是选定的 id

Answer 1

我在您的代码中发现了三个问题:

• PHP 的 9 行有错字 您发布的代码:
  我认为$extra ="WHERE ".$id=$_POST['id'];应该是 $extra ="WHERE ".$id."=".$_POST['Id'];注意等号=用双引号括起来。

• 在线 32 仍在 PHP 代码 $data .= $value['id']." | ".$value['firstname']";像这样删除分号前的最后一个双引号:
  $data .= $value['id']." | ".$value['firstname'];

• 您要寻找的事件 AJAX当用户在 <select> 中选择 id 时调用是 onchange , 在 jQuery 中 .change() .
  因此，请在您的 JS 的 14 线上收听它的事件。 代码也是:而不是 onfocus使用 onchange像这样document.getElementById("slct").onchange = function()

然后，由于您使用 jQuery 标记了您的帖子, 您可以使用 AJAX methods of jQuery哪个更快，更容易使用。

我会建议 jQuery.ajax() 方法:

$("#slct").change(function() {
    var idVar = $(this).val(); // The jQuery version of this.children[this.selectedIndex].value
    $.ajax({
        url:"http://localhost/somemaps/data.php",
        type:"post",
        data: {id: idVar},
        async:true,
        success: function(data) {
            //  Code to be executed if the request succeeds eg:
            $("#dbinfo").html(data);
            //  The data variable contains the content returned from the server
            },
        error: function() {
            //  Code to be executed if the request fails
            }
    });
});