最近写程序的时候经常遇到使用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. 逻辑回归算法的原理及实现(LR)

    Logistic回归虽然名字叫"回归" ,但却是一种分类学习方法.使用场景大概有两个:第一用来预测,第二寻找因变量的影响因素.逻辑回归(Logistic Regression, L ...

  2. Solr atomic update JSON方式

    http://yonik.com/solr/atomic-updates/ Solr supports several modifiers that atomically update values ...

  3. select 和 input 的不可编辑,input隐藏

    select 没有readOnly属性 在jsp中 <select  id="a" name="a" disabled="disabled&qu ...

  4. 学习_单片机/嵌入式_的资源链接。——Arvin

    ---恢复内容开始--- +单片机 -郭天祥的51单片机入门视频(链接: https://pan.baidu.com/s/1sl3xNDr 密码: 1zik) -51单片机20元购买资料公开(链接: ...

  5. swagger for c# webapi

    最近迷上了前后端分离的开发架构,工作中的项目几乎都采取这种模式,自己主要担任服务端RestFul风格的Webapi开发.那么问题来了,当前端开发人员找我要api说明文档的时候,曾一度非常可耻的冒出过w ...

  6. VB关闭其他进程的输入法

    http://files.cnblogs.com/files/liuzhaoyzz/%E5%85%B3%E9%97%AD%E5%85%B6%E4%BB%96%E8%BF%9B%E7%A8%8B%E8% ...

  7. react+redux完整项目

    地址:https://segmentfault.com/a/1190000007642740?utm_source=tuicool&utm_medium=referral

  8. sqoop、flume 安装

    sqoop安装步骤 1.上传解压tar包 tar -zxvf  sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz 2.修改配置文件 进入 sqoop/conf/ c ...

  9. 初始Java 第一课程DVD项目

    DVDSet 类: DVD DVD    删除功能 实现DVD借出功能 DVD还回功能

  10. MySQL问题记录--python插入中文至MySQL提示SQLErroor:1366错误

    一.在爬虫脚本做以下操作仍提示错误:SQL Error: 1366: Incorrect string value: "\xd0\xc2\xce\xc5-" for column  ...