备案控制台
开发者社区 开发与运维 文章 正文

ajax级联实现

2017-06-26 811
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

效果如下：

选择第一项，第二项、第三项的内容跟着改变。

选择第二项，第三项的内容跟着改变。

第三项则不影响第一项和第二项。

有几点值得提：

1.html到底是前台拼接还是后台拼接。

我选择的是前台拼接，这样可以节省流量，和后台的资源。这也比较符合程序处理，一般后台只负责提供数据。

通过json传递给前台，完了前台获取进行处理。

ajax函数

复制代码 
function ajaxgetbigclass(val){
    $.ajax({
            type:"POST",
            async:false, 
            url:"/default/index/ajax/do/ajaxgetbigclass",
            data:"typeid="+val,
            success:function(response){
                if(response){
                    res = response;
                }else{
                    res = false;
                }
            }
        });
    return res;
}

function ajaxgetsmallclass(val){
    $.ajax({
            type:"POST",
            async:false, 
            url:"/default/index/ajax/do/ajaxgetsmallclass",
            data:"bigclassid="+val,
            success:function(response){
                if(response){
                    res = response;
                }else{
                    res = false;
                }
            }
        });
    return res;
}
复制代码

后台ajax处理代码

 

复制代码 
case 'ajaxgetbigclass': 
                $typeid = trim($this->_getParam('typeid'));
                $daoNews = new dao_news();
                if(isset($typeid)){
                    $bigClass = $daoNews->getBigClassByType($typeid,true);
                    if($bigClass){
                        $json = json_encode($bigClass);
                        echo $json;
                    }else{
                        echo FALSE;
                    }
                }else{
                    echo FALSE;
                }
                break;
                case 'ajaxgetsmallclass': 
                $bigclassid = trim($this->_getParam('bigclassid'));
                $daoNews = new dao_news();
                if(isset($bigclassid)){
                    $smallClass = $daoNews->getSmallClassByBigClass($bigclassid,true);
                    if($smallClass){
                        $json = json_encode($smallClass);
                        echo $json;
                    }else{
                        echo FALSE;
                    }
                }else{
                    echo FALSE;
                }
                break;
复制代码

 

 

 

 

调用ajax函数，并拼接成html函数

复制代码 
function setbigclass(id,flag){
        var flag = arguments[1] ? arguments[1] : false;//默认值
        var res = ajaxgetbigclass(id);
        //alert(res);
        if(res){
            myobj = eval(res);
            for(var i=0;i<myobj.length;i++){  
                   strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
            }  
            $("#bigclassid").html(strHtml);
        }else{
            var strHtml = "<option value=''>无子选项</option>";
            $("#bigclassid").html(strHtml);
        }
        if(flag&&res){
            return myobj[0].id;
        }
}

function setsmallclass(id){
        var res = ajaxgetsmallclass(id);
        //alert(res);
        if(res){
            myobj = eval(res);
            var strHtml = "<option value=''>请选择</option>";
            for(var i=0;i<myobj.length;i++){  
                   strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
            }  
            $("#smallclassid").html(strHtml);
        }else{
            var strHtml = "<option value=''>请选择</option><option value=''>无子选项</option>";
            $("#smallclassid").html(strHtml);
    }
}
复制代码

主函数，事件动作

复制代码 
$(function(){
    //ajax级联
    $("#typeid").change(function(){
        var id = $(this).val();
        var res = setbigclass(id,true);
        if(res){
            setsmallclass(res);
        }else{
            setsmallclass(0);
        }
        
    });

    $("#bigclassid").change(function(){
        var id = $(this).val();
        setsmallclass(id);
    });
});
复制代码

 

2.后台查询函数化。

复制代码 
public function getType($where = false, $order = 'typeid ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
        return $this->getData($this->_typename,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
    }

    public function getTypeName($flag=false){
        $where = array();
        $aType = $this->getType($where);
        if($aType){
            if($flag){
                foreach ($aType as $key => $value) {
                    $type[$key]['id'] = $value['typeid'];
                    $type[$key]['name'] = $value['typename'];
                }
                return $type;
            }else{
                foreach ($aType as $key => $value) {
                    $type[$value['typeid']] = $value['typename'];
                }
                return $type;
            }
        }else{
            return false;
        }
    }

    public function getBigClass($where = false, $order = 'BigClassID ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
        return $this->getData($this->_bigname,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
    }

    public function getBigClassByType($typeid = 60,$flag=false){
        $where = array();
        $where['BigClass.typeid =?'] = array("type"=>1,"val"=>$typeid);
        //print_r($where);exit;
        $from = array('BigClassID',"BigClassName","convert(text,BigClassMaster) as BigClassMaster","typeid"); 
        $aBigClass = $this->getBigClass($where, false, false, false, false,$from);
        if($aBigClass){
            if($flag){
                foreach ($aBigClass as $key => $value) {
                    $bigClass[$key]['id'] = $value['BigClassID'];
                    $bigClass[$key]['name'] = $value['BigClassName'];
                }
                return $bigClass;
            }else{
                foreach ($aBigClass as $key => $value) {
                    $bigClass[$value['BigClassID']] = $value['BigClassName'];
                }
                return $bigClass;
            }
        }else{
            return false;
        }
    }

    public function getSmallClass($where = false, $order = 'SmallClassID ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
        return $this->getData($this->_smallname,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
    }

    public function getSmallClassByBigClass($BigClassID = 221,$flag=false){
        $where = array();
        $where['SmallClass.BigClassID =?'] = array("type"=>1,"val"=>$BigClassID);
        //print_r($where);exit;
        $aSmallClass = $this->getSmallClass($where);
        if($aSmallClass){
            if($flag){
                foreach ($aSmallClass as $key => $value) {
                    $smallClass[$key]['id'] = $value['SmallClassID'];
                    $smallClass[$key]['name'] = $value['smallclassname'];
                }
                return $smallClass;
            }else{
                foreach ($aSmallClass as $key => $value) {
                    $smallClass[$value['SmallClassID']] = $value['smallclassname'];
                }
                return $smallClass;
            }
        }else{
            return false;
        }
    }
复制代码

这样就可以多处使用，多种角度使用。

 

3.前台js，文件化，同一个功能的js放在一个js文件中。内容最后也函数化。

<script type="text/javascript" src="/js/news/cascade.js"></script>
复制代码 
<tr>
                        <td width="20%" height="56" align="right" >请选择分类：</td>
                        <td width="80%" style="padding:10px;">
                        <select id="typeid" name="typeid" class=" ffb-input">
                                <!--{html_options  options=$aType selected=$aData.typeid|default:'0'}-->
                        </select>
                        >
                        
                        <select id="bigclassid" name="bigclassid" class=" ffb-input">
                                <!--{html_options options=$aBigClass selected=$aData.bigclassid|default:'0'}-->
                        </select>
                        >
                        <select id="smallclassid" name="smallclassid" class=" ffb-input">
                                <option value="">请选择</option>
                                <!--{html_options class=" ffb-input"  options=$aSmallClass selected=$aData.smallclassid|default:'0'}-->
                        </select>
                        
                        </td>
                      </tr>
复制代码

这样会让文件很清晰。

 

 

优化后的js

复制代码 
$(function(){
    //ajax级联
    $("#typeid").change(function(){
        var id = $(this).val();
        setbigclass(id);
    });

    $("#bigclassid").change(function(){
        var id = $(this).val();
        setsmallclass(id);
    });
});

function setbigclass(id){
        var res = ajaxgetbigclass(id);
        var strHtml;
        if(res){
            myobj = eval(res);
            for(var i=0;i<myobj.length;i++){
                   strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
            } 
            $("#bigclassid").html(strHtml);
            $("#bigclassid").show().change();
        }else{
            $("#bigclassid").hide();
            $("#smallclassid").hide();
        }
}

function setsmallclass(id){
        var res = ajaxgetsmallclass(id);
        if(res){
            myobj = eval(res);
            var strHtml = "<option value=''>请选择</option>";
            for(var i=0;i<myobj.length;i++){  
                   strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
            }  
            $("#smallclassid").html(strHtml);
            $("#smallclassid").show();
        }else{
            $("#smallclassid").hide();
    }
}

function ajaxgetbigclass(val){
    $.ajax({
            type:"POST",
            async:false, 
            url:"/default/index/ajax/do/ajaxgetbigclass",
            data:"typeid="+val,
            success:function(response){
                if(response){
                    res = response;
                }else{
                    res = false;
                }
            }
        });
    return res;
}

function ajaxgetsmallclass(val){
    $.ajax({
            type:"POST",
            async:false, 
            url:"/default/index/ajax/do/ajaxgetsmallclass",
            data:"bigclassid="+val,
            success:function(response){
                if(response){
                    res = response;
                }else{
                    res = false;
                }
            }
        });
    return res;
}


文章标签：
前端开发
Web App开发
JavaScript
数据格式
JSON
桃子红了呐
目录
相关文章
游客f2q4zoahsboz6
|
14天前
|
XML 前端开发 JavaScript
AJAX 工作原理
AJAX运用XMLHttpRequest进行异步数据交换，结合JavaScript/DOM处理显示，CSS控制样式，XML承载数据，实现跨平台的Web应用。Google Suggest于2005年通过AJAX技术提供实时搜索建议，提升了用户体验。
游客f2q4zoahsboz6
10 2
瑞崽崽崽
|
5月前
|
XML 负载均衡 前端开发
什么是ajax,ajax都有哪些优点和缺点?
什么是ajax,ajax都有哪些优点和缺点?
瑞崽崽崽
109 1
xiaohua616
|
Web App开发 前端开发 JavaScript
使用AJAX基本步骤
使用AJAX基本步骤
xiaohua616
133 0
使用AJAX基本步骤
我是咔咔
|
前端开发
ajax无刷新删除
ajax无刷新删除
我是咔咔
55 0
谙忆
|
XML Web App开发 缓存
【AJAX】AJAX技术详细解析以及实例（1）
【AJAX】AJAX技术详细解析以及实例
谙忆
180 0
谙忆
|
前端开发 Java
【AJAX】AJAX技术详细解析以及实例（2）
【AJAX】AJAX技术详细解析以及实例
谙忆
174 0
【AJAX】AJAX技术详细解析以及实例（2）
答案命运
|
前端开发
Ajax-05：Ajax请求的基本步骤
Ajax-05：Ajax请求的基本步骤
答案命运
144 0
Ajax-05：Ajax请求的基本步骤
老朱教授
|
前端开发 C# JavaScript
AJAX 学习笔记[五] AJAX 如何处理多个异步请求
老朱教授
912 0
余二五
|
JSON 前端开发 JavaScript
Ajax常用方式
余二五
904 0
桃子红了呐
|
Web App开发 JSON 前端开发
ajax级联实现
桃子红了呐
747 0