最近写程序的时候经常遇到使用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("异常!");  
             }  
         });
        }
       }

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

  

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

对jQuery ajax三级级联的简单研究的更多相关文章

  1. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  2. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  3. jQuery学习之jQuery Ajax用法详解(转)

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  4. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  5. jQuery Ajax用法

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  6. jQuery学习之jQuery Ajax用法详解(转)

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  7. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  8. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  9. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

随机推荐

  1. 介绍一个可以将Expression表达式树解析成Transact-SQL的项目Expression2Sql

    一.Expression2Sql介绍 Expression2Sql是一个可以将Expression表达式树解析成Transact-SQL的项目.简单易用,几分钟即可上手使用,因为博主在设计Expres ...

  2. F12定义到元数据问题解决

    删除引用中的该dll,重新引用选择解决方案下的项目引用,下次F12就不会进入到元数据而是进入到源代码中方便调试

  3. 1.NSNotification|远程通知|本地通知|激光推送

    1.   通知在iOS中应用非常广泛,合理的应用通知可以减少冗余代码,使我们的代码层次结构变了更加的清晰明了,利于程序猿读写.它主要分为不可见通知可见通知两种: 1.1 不可见通知,主要是有系统发出的 ...

  4. 兼容IE7音乐播放器之jplayer的使用

    首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...

  5. Asp.Net完美隐藏服务器信息

    首先在Global.asax.cs里增加: protected void Application_PreSendRequestContent(object sender, EventArgs e){H ...

  6. 实现table的单线边框的办法

    实现table的单线边框的办法 现在给出效果图: 1.实现方法一:    <table border="0" cellspacing="1" style= ...

  7. Modernizr.js:为HTML5和CSS3而生!

    原文链接:http://caibaojian.com/modernizr-js.html modernizr这个JS,在国外的主题里面很多地方都看到,就只记得是为html补充的,有点类似与respon ...

  8. PacBio三代全长转录组/Iso-Seq技术及案例分析

    参考:产品手册 PacBio三代全长转录组有什么优势? 近年来,随着高通量测序技术的发展,转录组测序已经成为研究基因表达调控的主要手段.但二代的转录本重构准确率很低,三代可以直接得到全长转录本,无需组 ...

  9. <js>实现回车键登陆方法,并处理谷歌与火狐不兼容的问题

    1.在body中添加onkeydown事件 <body onkeydown="keyLogin(event);">2.使用js相应登陆添加方法//添加回车登陆事件 fu ...

  10. lua实现私有函数

    本文是原创文章,如需转载,请注明文章出处 要用lua实现私有函数,关键就是使用metatable的特性来实现. Test.lua: local v = {};v.x = 100;v.y = 200; ...