MySQL的 - JSON数据没有显示在HTML [英] MySql - JSON data not showing in html
问题描述
我想创建一个下拉列表，从一个MySQL。
该PHP是获取成功从MySQL中的数据。但我的问题是数据不显示在我的HTML页面的下拉列表？
json_mysql_data2.php
标题（内容类型：应用程序/ JSON）;
require_once（con.php）;
$ i = 0;
$ jsonData =阵列（）;
的foreach（$ conn_db-＆GT;查询（选择从的customerID客户WHERE家具= '33'）为$结果）{
$ I ++;
$ jsonData [文章$ I] = $结果['的customerID'];
}
回声json_en code（$ jsonData）;
myJS.js
$（文件）。就绪（函数（）{
变种ddlist =的document.getElementById（ddlist）;
VAR小时=新XMLHtt prequest（）;
hr.open（GET，json_mysql_data2.php，真正的）;
hr.setRequestHeader（内容型，应用程序/ x-WWW的形式urlen codeD）;
hr.onreadystatechange =功能（）{
如果（hr.readyState == 4和＆安培; hr.status == 200）{
变种D = JSON.parse（hr.responseText）;
为（在D变种O）{
如果（D [O] .title伪）{
ddlist.innerHTML + ='＆LT; /选项＆GT;＆LT;期权价值='+ D [O] .title伪+'＆LT; /选项＆GT;';
}
}
}
}
hr.send（空）;
ddlist.innerHTML =装入客户ID ......;
}）;
HTML
＆LT;脚本SRC =myJS.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =DLIST＆GT;
客户ID：
＆LT;选择一个id ='EmpLstNAME =dwlist的onchange ='的document.getElementById（VAL1）值= THIS.VALUE。＆GT;＆LT;期权价值=＆GT;选择学生证和LT; /选项＆GT;
＆LT; DIV ID =ddlist＆GT;＆LT; / DIV＆GT;
＆LT; /选择＆GT;
＆LT; / DIV＆GT;
您的innerHTML 是错误的。你有一个额外的＆LT; /选项＆GT; 一开始，你就错过了结束＆GT; 的＆LT;选项＆GT; 。你也不必在选择任何文本，所以菜单项都将是空白的。
您还应该追加到＆LT;选择＆GT; ，而不是＆LT; DIV＆GT;
hr.onreadystatechange =功能（）{
如果（hr.readyState == 4和＆安培; hr.status == 200）{
变种D = JSON.parse（hr.responseText）;
变种empList =的document.getElementById（EmpList）;
为（在D变种O）{
如果（D [O] .title伪）{
empList.innerHTML + ='＆LT;期权价值='+ D [O] .title伪+'＆GT;'+ D [O] .title伪+'＆LT; /选项＆GT;';
}
}
}
}
I'm trying to create a drop down list from a MySql.
The php is successfully fetching the data from the MySql. But my problem is the data is not showing on the drop down list in my HTML page?
json_mysql_data2.php
header("Content-Type: application/json");
require_once("con.php");
$i=0;
$jsonData = array();
foreach ($conn_db->query("SELECT customerID FROM customers WHERE furniture='33' ") as $result){
$i++;
$jsonData["article".$i]=$result['customerID'];
}
echo json_encode($jsonData);
myJS.js
$(document).ready(function(){
var ddlist = document.getElementById("ddlist");
var hr = new XMLHttpRequest();
hr.open("GET", "json_mysql_data2.php", true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var d = JSON.parse(hr.responseText);
for(var o in d){
if(d[o].title){
ddlist.innerHTML += '</option><option value='+d[o].title+'</option>';
}
}
}
}
hr.send("null");
ddlist.innerHTML = "Loading Customer ID....";
});
html
<script src="myJS.js" type="text/javascript"></script>
</head>
<body>
<div class="dlist">
Customer ID:
<select id='EmpLst' name="dwlist" onchange='document.getElementById("val1").value = this.value;'><option value="">SELECT STUDENT ID</option>
<div id="ddlist"></div>
</select>
</div>
Your innerHTML is wrong. You have an extra </option> at the beginning, you're missing the closing > of the <option>. You also don't have any text in the option, so the menu items will all be blank.
You also should be appending to the <select> instead of a <div>.
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var d = JSON.parse(hr.responseText);
var empList = document.getElementById("EmpList");
for(var o in d){
if(d[o].title){
empList.innerHTML += '<option value="'+d[o].title+'">'+d[o].title+'</option>';
}
}
}
}
这篇关于MySQL的 - JSON数据没有显示在HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
