zoukankan      html  css  js  c++  java
  • ajax三级联动

    不得不说的trim(),我的机器写出来的文件接收data时一定要去除空格…没有去写有参数的方法,因为找错就费了大量的时间,所以相对别人而言trim()于我可能真真的就此记住了

    html代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="../jquery-1.11.2.min.js"></script>//加载jquery包
    <script src="sanji.js"></script>//加载js文件,jquery记得放在最前面就行
    </head>
    
    <body>
    <div id="sanji"></div>
    </body>
    
    </html>

    jquery代码

    // JavaScript Document
    $(document).ready(function(e) {
        $("#sanji").html("<select id='sheng'></select> <select id='shi'></select> <select id='qu'></select>");//三个下拉
        //填充内容
        //1.填充省
        FillSheng();//调用三个方法
        FillShi();
        FillQu();
        $("#sheng").change(function(){  //调用jquery自有的change方法,省份改变时相应的市、区也发生改变
            //改变市,重新填充市
            FillShi();
            //改变区,重新填充区
            FillQu();
            
            })
        //如果市选中变化的时候就去填充区
        $("#shi").change(function(){//依旧是调用change方法,市改变时相应的区也会发生改变
            
            
            //改变区,重新填充区
            FillQu();
            
            })
        
    
        
        function FillSheng()//省的方法
        {
            var pcode="0001";//默认0001
            //调用ajax
            $.ajax({
                async:false,//同步
                url:"chuli.php",//从哪个页面获取data
                data:{pcode:pcode},
                type:"POST",//post传值
                dataType:"TEXT",
                success: function(data){
                    var str="";
                    var hang=data.trim().split("|");  //去除空格,将接收的data用字符"|"拆分               
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie=hang[i].split("^");//将行里面每一个数据用"^"隔开
                        str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";//下拉显示的内容
                    }
                    
                    $("#sheng").html(str);   //将写好的str给html页面             
                    }        
        
                })
        }
         市、区的function同省一样,只是有个别地方需要更改
        function FillShi()
        { var pcode=$("#sheng").val();//获取省的value值
        
            $.ajax({
                async:false,
                url:"chuli.php",
                data:{pcode:pcode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                    
                    var str="";
                    var hang=data.trim().split("|");                
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie=hang[i].split("^");
                        str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    
                    $("#shi").html(str);
                    
                    }        
            
                })    
        }
        
        function FillQu()
        { var pcode=$("#shi").val();//获取市的value值
            $.ajax({
                async:false,
                url:"chuli.php",
                data:{pcode:pcode},
                type:"POST",
                dataType:"TEXT",
                success: function(data){
                
                    var str="";
                    var hang=data.trim().split("|");        
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie=hang[i].split("^");
                        str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
                    }
                    
                    $("#qu").html(str);
                    
                    }        
                        
                
                })    
            
        }
       
    });    

    php代码

    <?php
    $pcode=$_POST["pcode"];//post获取pcode值
    include("ChaXun.class.php");
    $db=new ChaXun();
    $sql="select AreaCode,AreaName,ParentAreaCode from Chinastates where ParentAreaCode='{$pcode}'"; 
    echo $db->StrQuery($sql);
    
    
    //$attr=$db->Query($sql);
    //var_dump ($attr);
    //$str="";
    //foreach($attr as $v)
    //{
    //    $str=$str.implode("^",$v);
    //    $str=$str."|";
    //}
    //$str=substr($str,0,strlen($str)-1);
    //echo $str;
  • 相关阅读:
    重复造轮子感悟 – XLinq性能提升心得
    分享动态拼接Expression表达式组件及原理
    拦截Response.Redirect的跳转并转换为Js的跳转
    高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
    高仿QQ即时聊天软件开发系列之二登录窗口界面
    高仿QQ即时聊天软件开发系列之一开端
    关于404二级目录或三级目录不显示图片的方法
    如何在cmd查看文件内容的MD5值
    VMware虚拟机下载与安装
    dede自定义表单放首页出错的解决办法
  • 原文地址:https://www.cnblogs.com/nannan-0305/p/5513475.html
Copyright © 2011-2022 走看看