对jQuery ajax三级级联的简单研究

　　最近写程序的时候经常遇到使用ajax获取数据的问题，刚好昨天遇到ajax写三级级联问题，自己写了一个简单的级联。对于服务端获取数据的就不多写了，客户端的ajax发送请求我在这里详细说一下，因为我也没专门学过jQuery的ajax也都是在网上看的资料，希望我的理解对大家有帮助吧。

　　<script type=”text/javascript”>
        var ctx = ‘<%=request.getContextPath()%>’;
        //获取一级职位分类
        window.onload=function(){
                 $.ajax({
                url:ctx+’/hr/base/job/queryJobLevel1.htm’,
               type:’post’,
               contentType:”application/json”,
               data:'{}’,
               dataType:’json’,
               success:function(data) {
               $(“#level1”).empty();
                  $(“#level1”).append(“<option value=”>请选择职位类型</option>”);
                  for(var i=0;i<data.data.length;i++){
                      $(“#level1”).append(“<option value='”+data.data[i].id+”‘>”+data.data[i].name+”</option>”);
                  }
            },
            error : function() {
                 alert(“异常！”);
           }
       });
        }
       function addSub(value){
        if(“”!=value){
        $.ajax({
                url:ctx+’/hr/base/job/queryJobLevel2.htm’,
               type:’post’,
               contentType:”application/json”,
               data:'{rid:value}’,
               dataType:’json’,
               success:function(data) {
                  $(“#level2”).empty();
                  $(“#level2”).append(“<option value=”>请选择职位类型</option>”);
                  for(var i=0;i<data.data.length;i++){
                      $(“#level2”).append(“<option value='”+data.data[i].id+”‘>”+data.data[i].name+”</option>”);
                  }
            },
            error : function() {
                 alert(“异常！”);
           }
       });
        }
       }

       function addSub2(value){
        if(“”!=value){
        $.ajax({
                url:ctx+’/hr/base/job/queryJobLevel3.htm’,
               type:’post’,
               contentType:”application/json”,
               data:'{rid:value}’,
               dataType:’json’,
               success:function(data) {
                  $(“#level3”).empty();
                  for(var i=0;i<data.data.length;i++){
                      $(“#level3”).append(“<option value='”+data.data[i].id+”‘>”+data.data[i].name+”</option>”);
                  }
            },
            error : function() {
                 alert(“异常！”);
           }
       });
        }
       }

做了三个下拉框，好像这样的比较简单一些。

之前研究了很久，做完才发现其实也不是特别的难，希望对大家有帮助。

个人收藏笔记记录

开通VIP