js从mysql数据库取值,从查询sql数据库获取数据到javascript

I have a problem with my code.

case like this:

I have a dropdown, if selected "personal" it appeared the new dropdown that contains the data that is retrieved from a database query, if selected "public", then the dropdown disappear.

HTML code like this:

Public

Personal

Query like this:

$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 code like this:

function changeSend() {

var selectBox = document.getElementById("sender");

var selectedValue = selectBox.options[selectBox.selectedIndex].value;

if (selectedValue==0) {

$('#send2').html("-name from result database query-");

} else {

$('#send2').html('');

}

}

I dont know how to send value/result ($id[0],$name[0],$id[1],$name[1], etc..) to javascript code(value and name in select options).

解决方案

In javascript you have to make an ajax call to your php file:

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

And in your php file you have to echo your data in JSON format:

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

UPDATE

in your case use the following code:

(not tested)

php code:

$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 code:

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

for( var index in response ){

select = select + ""+response[index]+"";

}

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

}

}

USING jQuery

javascript code:

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

for( var index in response ){

select = select + ""+response[index]+"";

}

select += "";

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

});

}

else {

$('#send2').html('');

}

}