在 PHP 和 Ajax 中从数据库数据动态创建下拉列表

Posted 2023-05-09

【中文标题】在 PHP 和 Ajax 中从数据库数据动态创建下拉列表

【英文标题】：Dynamical creating dropdown from database data in PHP & Ajax

【发布时间】：2015-01-06 13:55:44

【问题描述】：

我正在尝试制作将由从数据库收集的数据填充的动态下拉列表。我被困在从 php 文件发送的多维数组中解析数据。我的代码：

部分 html 文件（仅负责的 javascript（Ajax 函数））

function mentor() 
  // 1. Create XHR instance - Start
  var oblast = document.getElementById("oblast").value; //previous dropdown from which I need to create next one
  document.getElementById("mentorr").innerHTML = ""; //emtpy the dropdown I need to create 

  instancee();
  // 1. Create XHR instance - End

  // 2. Define what to do when XHR feed you the response from the server - Start
  xhr.onreadystatechange = function () 
    if (xhr.readyState === 4) 
      if (xhr.status == 200 && xhr.status < 300) 
        var val = xhr.responseText; 
        alert(val); //just a check to see does it get correct data, and it get, everything is OK so far

        var jsonData = JSON.parse(val);
        var selectList = document.getElementById('mentorr'); //id of the dropdown I need to create

        for (var i in jsonData) 
          var option = document.createElement('option');
          //$response[$i]['name'];
          option.value = jsonData['id'][i];
          option.text = jsonData['name'][i];
          selectList.appendChild(option);
        
      
    
  

  // 2. Define what to do when XHR feed you the response from the server - Start

  // 3. Specify your action, location and Send to the server - Start 
  xhr.open('POST', 'ajax.php');

  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("oblast=" + oblast);

获取数据并发送到 HTML 的 ajax.php 文件的一部分：

$queryData1 = mysql_query("SELECT * FROM profesori WHERE idprof = '$prof'");

while($result2 = mysql_fetch_array($queryData1)) 
  $id=$result2['idprof'];
  $profesor=$result2['ime']. " ".$result2['prezime'];

  $data = array
  (
    'id' => array($id),
    'name' => array($profesor)
  );

  echo json_encode($data);      

alert(var) 代码行给出了这个：

所以数据正确地从数据库中获取并发送到 HTML。但问题在于填充下拉菜单（解析数据）。控制台中的“意外令牌 ”行中的错误

var jsonData = JSON.parse(val);

有谁知道如何解决这个问题？

【问题讨论】：

您可以调用 val.toString() 并检查它是否真的是 JSON。

JSON.parse('"id":["2"],"name":["Zdravko Topic"]') 工作正常，尽管您不需要在 php 代码中转换 array。

它真的是 JSON.. 我不能那样解析，因为值不会是 "id":["2"],"name":["Zdravko Topic"] 总是，问题是如何解析具有值的多维数组 ('id' => $varid, 'name'=> $varname) 并将其放入下拉列表中，例如 $varname

【参考方案1】：

for (var i = 0; i < jsonData.length; i++) 
    var option = document.createElement('option');
    option.value = jsonData[i].id;
    option.text = jsonData[i].name;
    selectList.appendChild(option);

应该做到这一点，JSON.parse 返回 json 对象，您可以使用索引遍历对象并获取对象的属性，例如“object.property”。

【讨论】：

看起来很有希望（50% 的答案）。但仍然不能 JSON.parse 2d 数组。我收到意外的令牌 错误：var jsonData = JSON.parse(val);

json 对我来说解析得很好，而且你将 id 和 name 都存储为一个单独的数组，尝试将它存储为 'id' => $id 和 'name' => $professor in ajax.php

如你所说，我已经更正了 ajax.php 中的数组...并修复了 JSON.parse，但是 JSON.parse 仅在我只有一个数据库查询（如 "id":["2 "],"name":["Zdravko Topic"]，当我有多个查询时："id":["1"],"name":["Name Lastname"]"id":[ "2"],"name":["Zdravko Topic"]，然后它又给了我意想不到的令牌。你能试试那个例子吗？哦，是的，jsonData.length 根本不起作用，它说 undefined.. 当我只使用一个数据库查询时，例如： "id":["2"],"name":["Zdravko Topic"] 没有 for循环，然后它就像魅力一样，，，有点令人困惑，嗯

知道了，你的代码很好......我在我的 php 脚本中创建了无效的 JSON