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

　　})