Jquery Ajax Select，使用Select从数据库中获取数据

如何使用以下方法从数据库中获取值：用户在

函数中选择id（即1），然后数据显示在

标记中 我有以下内容，我可以用

更改文本，但由于某种原因，我无法从数据库中获取数据

选择代码

<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;


?>

这里有数据
选择一个数字
1.
2.
3.
4.
5.
document.getElementById（“slct”）.onfocus=function（）
{
警报（document.getElementById（'slct'）.value）；
var xmlhttp=new XMLHttpRequest（）；
var text=“”；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
var dbText=xmlhttp.responseText；
var obj=JSON.parse（）；
var文本；
var i；
对于（i=0；i

数据代码

<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;


?>

我在想我应该为回报增加一个价值？但这似乎不起作用，那么问题出在哪里呢？欢迎提供任何提示/建议（：

编辑

cliffs回应并将我的代码更改为他的代码后，结果如下：

选择此选项后，会发生以下情况：

---

如前所述，数据库中的所有数据只是显示而不是所选id，我在您的代码中发现了三个问题：

$sth = $connection->prepare("SELECT `id`, `firstname`, FROM `db-name` WHERE ".((isset($_POST['id'])) ? "`id`" : ":id")." = :id");
$sth->execute(array(":id" => (isset($_POST["id"])) ? $_POST["id"] : 0));
$result = $sth->fetchAll(PDO::FETCH_ASSOC);

• 您发布的

  PHP

  代码的9行有一个打字错误：
  我认为

  $extra=“WHERE”。$id=$\u POST['id']；

  应该是

  $extra=“WHERE”。$id.“=”$\u POST['id']；

  注意双引号中的等号

  =

• 在线32仍在

  PHP

  code

  $data.=$value['id']。“|”。$value['firstname']；

  删除分号前的最后一个双引号，如下所示：
  

  $data.=$value['id']。“|”。$value['firstname']；

• 当用户在
  中选择id时，要进行

  AJAX

  调用所需的事件是

  onchange

  ，在jQuery中
  因此，也可以在

  JS

  代码的14行上收听它的事件：不要使用

  onfocus

  而使用

  onchange

  像这样

  document.getElementById（“slct”）.onchange=function（）

然后，由于您使用标记了您的帖子，因此您可以使用更快速、更易于使用的

我建议采用以下方法：

---

不幸的是，这对我不起作用，你还做了什么修改吗？Hi@RDAxRoadkill，回答了你的问题吗？Hi@Cliff，谢谢你的回答。虽然有一些拼写错误，这可能是错误（感谢你找到了错误），但将脚本更改为jquery函数不会产生一些结果，但不会太多。我使用了你的代码（只是复制+粘贴）但这只是将我的数据库放到页面上，所以我需要添加什么吗？很抱歉@RDAxRoadkill，但我现在不太明白问题出在哪里。你说的“这只是将我的数据库放到页面上”是什么意思"？您可以编辑您的问题以显示结果吗？如果您复制了我的代码，请记住更改url和数据。抱歉，没有清除@cliff，我的意思是，当我按下按钮时，数据库中存储的所有数据都会显示，而不是id 1。我更改了url和数据，我将编辑我的问题确定nk you@RDAxRoadkill，您似乎没有为

PHP

脚本提供正确的数据，导致将空字符串赋值给

$extra

变量（

PHP

脚本的第一个

if（）…else

）。我想指出，jQuery的AJAX

data

参数的格式必须是这样的对象：

{number:4，string:“hello”，variable:variableName}

因此，如果在

PHP

代码中您希望

$\u POST[“id”]

您必须编写这个

{id:this.children[this.selectedIndex].value}

你在这样做吗？我已经更新了我的答案，现在应该可以正常工作了。

this.children[this.selectedIndex].value的jQuery版本是
$（this.val（）