ajax获取json格式 二级联动下拉菜单
在后台交互获得的数据json数据，在前台交互得不到他的值。，原来要用eval（）对json数据进行转换成
对象！！再用$.each()函数进行循环输出。
1.在1.php中关键代码
<div>
<select name=\'s\' id=\'ss\' onchange="return show(this.value)">
<option value="default">请选择</option>
<?php foreach($arr as $v){?>
<option value="<?=$v[\'id\']?>"><?=$v[\'title\']?></option>
<?php }?>
</select>
<select name="g" id="gg">
<option value="default">--default--</option>
<option value="v1">t1</option>
<option value="v2">t2</option>
<option value="v3">t3</option>
</select>
</div>
javascript代码为：
function show(n){
var id = n;
$.ajax({
type:\'GET\',
url:\'2.php\',
data:\'id=\'+id,
success:function(data){
var gg = $("#gg");
gg.empty(); //每次清空选项。
var dataObj = eval("("+data+")"); //json数据转换成对象[不能少]，也可用JSON.parse(data）转换[不支持ie6和7]
$.each(dataObj,function(index,item){
gg.append(\'<option value=\'+item.id+\'>\'+item.title+\'</option>\')
})
}
})
}
onchange() 事件会在域的内容改变时发生
2.在2.php中
$id = $_GET[\'id\'];
$sql = "select `id`,`title` from tv_city where classid=".$id." order by id asc";
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)){
$arr[] = $row;
}
echo json_encode($arr); //输出json
这样就可以得到二级联动菜单。
方法2：与后台交互不获取json数据，而是其他数据。
<div>
<select name=\'s\' id=\'ss\' onchange="return show(this.value)">
<option value="default">请选择</option>
<?php foreach($arr as $v){?>
<option value="<?=$v[\'id\']?>"><?=$v[\'title\']?></option>
<?php }?>
</select>
<select name="g" id="gg">
</select>
</div>
javascript代码为：
function show(n){
var id = n;
$.ajax({
type:\'GET\',
url:\'2.php\',
data:\'id=\'+id,
success:function(data){
var gg = $("#gg");
gg.empty(); //每次清空选项。
gg.append(data);
}
})
}
在2.php代码中
$id = $_GET[\'id\'];
$sql = "select `id`,`title` from tv_city where classid=".$id." order by id asc";
$res = mysql_query($sql);
while($row = mysql_fetch_array($res)){
$arr[] = $row;
}
<?php foreach ($arr as $v ) {?>
<option value=\'<?=$v[\'id\']?>\'><?=$v[\'title\']?></option>
<?php }?>
这样也可以，直接在2.php循环出结果，再用jquery的append（）函数插入到相应的位置！
****************************************************************
$.getJSON();函数得到的json数据自动转换成javascript对象，就不用像$.jax()函数一样要将json数据转换成javascript对象了。
所以[$.getJSON()方法如下]：
$.getJSON(\'2.php?id=\'+id,function(data){
var gg=$("#gg");
gg.empty();//每次选择不一样的先清空
//用$.each( )函数循环出来。。
var html=\'\';
$.each(data,function(index,obj){
html+=\'<option value=\'+obj.id+\'>\'+obj.title+\'</option>\';//循环构造html;
})
//循环结束，查到对应的位置
gg.html(html);
})