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

Question

我的代码有问题。
像这样的情况:
我有一个下拉列表，如果选择“个人”，则会出现新的下拉列表，其中包含从数据库查询检索的数据，如果选择“公共(public)”，则下拉列表消失。
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 调用:

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 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('');
   }
}