最近写程序的时候经常遇到使用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. Linux杂乱小知识点

    1.不同网段的主机不能建立TCP连接 2.TCP客户端可以用bind绑定自己的IP与port(一般情况下不需要绑定,port由系统自动分配) 3.accept() 函数返回一个套接字,send / r ...

  2. 【前端】我的Gulp配置

    2. gulp + browserify /** * File Name: gulpfile.js */ // 引入 gulp var gulp = require('gulp'); // 引入组件 ...

  3. 修改C:\WINDOWS\system32\drivers\etc\hosts 文件有什么作用

    host是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统会 ...

  4. python之socket

    一.初识socket      socket 是网络连接端点,每个socket都被绑定到一个特定的IP地址和端口.IP地址是一个由4个数组成的序列,这4个数均是范围 0~255中的值(例如,     ...

  5. 微信小程序-视图条件渲染

    条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...

  6. ASP.NET 状态服务 及 session丢失问题解决方案总结

    ASP.NET2.0系统时,在程序中做删除或创建文件操作时,出现session丢失问题.采用了如下方法:1.asp.net Session的实现:asp.net的Session是基于HttpModul ...

  7. sql 查看某用户的连接数 以及 如何删除该用户的会话

    --查看不同用户的连接数 select TERMINAL from v$session where username='username' and machine='machine' ---查询用户会 ...

  8. 可拖拽和带预览图的jQuery文件上传插件ssi-uploader

    插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...

  9. 转:java怎么用一行代码初始化ArrayList

    java怎么用一行代码初始化ArrayList 您可以创建一个工厂方法: public static ArrayList<String> createArrayList(String .. ...

  10. virsh创建和恢复快照

    virsh创建快照: virsh snapshot-create-as image的名称 snapshot的名称 例如: virsh snapshot-create-as 172.16.1.1_cen ...