跨域-getJSON和jsonp 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省、市、县三级联动</title>
</head>
<body>
    <div id="box">
        <select name="province" id="province">
            <option value="">请选择</option>
            
        </select>
        <select name="stadt">
            <option value="">请选择</option>
        </select>
        <select name="county">
            <option value="">请选择</option>
        </select>
    </div>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        
    //省级获取
        // $.get("http://area.shen-xin.cc/index2.php",{Id:0},function(data){
            
        //             var sheng="<option value=''>请选择</option>";
                    
                    

        //             $.each(data.info,function(i,value){
        //                     sheng+='<option value='+value.codeid+'>'+value.cityName+'</option>';

        //             });

        //             $("select[name='province']").html(sheng);

        // },'JSONP');  
        //JSONP用于跨域   $.getJSON  也能自动实现跨域



        var url="http://area.shen-xin.cc/index2.php?callback=?";
        function callback(){
                var cb = context.Request["callback"];
                 context.Response.Write(cb + "(" + json + ")");
        }  //    callback函数可以省略
        $.getJSON(url,{Id:0},function(data){
               
            
                    var sheng="<option value=''>请选择</option>";
                    
                    

                    $.each(data.info,function(i,value){
                            sheng+='<option value='+value.codeid+'>'+value.cityName+'</option>';

                    });

                    $("select[name='province']").html(sheng);

        }); 














                    $("select[name='province']").change(function(){

                        $("select[name='county']").html("<option value=''>请选择</option>");
                        var shid=$(this).val();

                        if(shid===''){
                            $("select[name='stadt']").html("<option value=''>请选择</option>");
                            return false;
                            };


                        var shi="<option value=''>请选择</option>";
                        $.get("http://area.shen-xin.cc/index2.php",{Id:shid},function(data){
                            $.each(data.info,function(i,value){
                                shi+='<option value='+value.codeid+'>'+value.cityName+'</option>'
                            });
                            $("select[name='stadt']").html(shi);
                        },'JSONP')


                    });

                    $("select[name='stadt']").change(function(){

                        var xianid=$(this).val();

                        if(xianid===''){
                            $("select[name='county']").html("<option value=''>请选择</option>");
                            return false;
                            };

                        var xian="";
                        $.get("http://area.shen-xin.cc/index2.php",{Id:xianid},function(data){
                            $.each(data.info,function(i,value){
                                xian+='<option value='+value.codeid+'>'+value.cityName+'</option>'
                            });
                            $("select[name='county']").html(xian);
                        },'JSONP')


                    });
                    
                    



        //市级获取



    })
</script>
</html>

 

posted @ 2017-11-15 19:20  Jinsuo  阅读(645)  评论(0)  编辑  收藏  举报