Question

我正在尝试使用ajax和php创建一个依赖的下拉列表但是无法获得所需的结果

这是我的ajax代码

<html>
<head>
<title>findperson</title>
<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
var x=ddl1.value;
var service;
var url='service.php?data='+x;
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET",url);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) { 
service=XMLHttpRequestObject.responseText;
for (var i=0;i<service.length;i++ ){
var opt = service[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
ddl2.appendChild(el);
}

}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<form method="post" action="problem.php">
<select name="city" id="city"       onchange="configureDropDownLists(this,document.getElementById('service'))">
<option selected="selected" value="">City</option>
<option value="jhansi">Jhansi</option>
<option value="lucknow">Lucknow</option>
</select>
<select id="service">
<option selected="selected" value="">Service</option>
</select>
<input type="submit" name="proceed" value="Next"/>
</form>
</body>
</html>

这是我的php文件

<?php
include_once('db.php');
$db=new db();
$sql=$db->database_initialise();
$city=$_GET['data'];
$query="select service_name from service_offered where city='$city'";
if($result=$sql->query($query)){
if($result->num_rows >0){
    $i=0;
    while($row=$result->fetch_array()){
        $service[$i]=$row[0];
        $i++;
    }
  }
}
var_dump($service);
?>

问题是，在第二个下拉列表中，选择城市时没有发生任何变化

Answer 1

替换var_dump（$ service）

echo json_encode($service);

Answer 2

您的问题是您从PHP返回$service数组并以字符串形式在AJAX中访问它。 service=XMLHttpRequestObject.responseText;会返回字符串对象。在你的for循环中，看起来你正试图通过数组进行索引。但是，您不能通过这样的字符串索引并获得您期望的内容。最好的方法是使用像Leo建议的echo json_encode($service);，然后使用responseText

在AJAX转换中使用JSON.parse

var json = JSON.parse(XMLHttpRequestObject.responseText);

然后在for循环中

var opt = json[/*i or column name*/];

或

var opt = json.service_name[i];

注意：要在PHP中返回JSON字符串，您必须设置标题：header("Content-type: application/json");

希望有所帮助！

Answer 3

这里有几个问题：

您的PHP没有发送正确的回复。你想要做的是让PHP发送一个JSON响应。
一旦PHP发送此JSON响应，您就需要将其解析为对象
一旦您的回复采用对象格式，您就可以遍历结果。

试试这个：

PHP （这是从您的数据库返回的内容的示例）：

$response = array(
    array(
        "id" => "1",
        "name" => "something"
    )
);

header('Content-Type: application/json');
echo json_encode($response);

<强> JS：

function configureDropDownLists(ddl1, ddl2) {
    var url = 'submit.php?data=' + ddl1.value;
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp) {
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = xmlhttp.responseText;
                var obj = JSON.parse(json);
                for (var i = 0; i < obj.length; i++) {
                    var opt = obj[i];
                    var el = document.createElement("option");
                    el.textContent = opt.name;
                    el.value = opt.id;
                    ddl2.appendChild(el);
                }
            }
        };

        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    }
}

依赖下拉列表生成

3 个答案: