从查询 sql 数据库获取数据到 javascript

Question

我的代码有问题。
像这样的情况：
我有一个下拉列表，如果选择“个人”，则会出现包含从数据库查询中检索到的数据的新下拉列表，如果选择“公共”，则下拉列表会消失。
HTML 代码如下：

<select name="use" class="dropdown" id="sender" onChange='changeSend()'>
     <option value=1>Public</option>
     <option value=0>Personal</option>
</select>

<div id='send2'></div>

这样查询：

<?php
    $query = mysql_query("select * from data where id_user = '$id_user' order by date asc");
    $i = 0;
    $id = array();
    $name = array();
    while($data = mysql_fetch_array($query)){
       //id from result database query
       $id[$i] = $data['id'];
       //name from result database query
       $name[$i] = $data['name'];
       $i++;
    }
?>

JavaScript 代码如下：

function changeSend() {
   var selectBox = document.getElementById("sender");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   if (selectedValue==0) {
       $('#send2').html("<select class='dropdown'><option value='-id from result database-'>-name from result database query-</option></select>");
   } else { 
    $('#send2').html('');
   }
}

我不知道如何将值/结果 ($id[0],$name[0],$id[1],$name[1], etc..) 发送到 javascript 代码（选择选项中的值和名称）。

Answer 1

在 javascript 中，您必须为您的 php 文件创建一个 ajax call：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("send2").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","yourFile.php",true);
xmlhttp.send();

在您的 php 文件中，您必须以 JSON 格式 echo 您的数据：

echo json_encode(array('id'=>$id,'name'=>$name));

更新 在您的情况下，使用以下代码： （未测试）

php代码：

<?php
    $query = mysql_query("select * from data where id_user = '$id_user' order by date asc");
    $i = 0;
    $options = array();
    while($data = mysql_fetch_array($query)){
       $options[$data['id']] =  $data['name'];
    }
    echo json_encode($options);
?>

javascript代码：

var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
      var response = JSON.parse(xmlhttp.responseText);
      var select = '<select class='dropdown'>';

      for( var index in response ){
          select = select + "<option value='"+ index +"'>"+response[index]+"</option>";
      }
      select += "</select>";
      document.getElementById("send2").innerHTML= select;
  }
}
function changeSend() {
   var selectBox = document.getElementById("sender");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   if (selectedValue==0) {
       xmlhttp.open("GET","yourFile.php",true);
       xmlhttp.send();
   } 
   else { 
     $('#send2').html('');
   }
}

使用 jQuery

javascript代码：

function changeSend() {
   var selectBox = document.getElementById("sender");
   var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   if (selectedValue==0) {

       $.get("yourFile.php", function(data){
           var response = JSON.parse(data);
           var select = '<select class='dropdown'>';

           for( var index in response ){
               select = select + "<option value='"+ index +"'>"+response[index]+"</option>";
           }
           select += "</select>";

           $("#send2").html(select);
       });

   } 
   else { 
     $('#send2').html('');
   }
}

Answer 2

最好的方法可能是使用 ajax 调用，无论如何，如果您在与 php 相同的页面中声明脚本，您可以使用选项对数组进行 json 编码，以便您能够将其访问到 javascript ，像这样：

var optionIds = <php echo json_encode($id); ?>
var optionNames = <php echo json_encode($name); ?>