对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("异常!");
}
});
}
}
做了三个下拉框,好像这样的比较简单一些。
之前研究了很久,做完才发现其实也不是特别的难,希望对大家有帮助。
对jQuery ajax三级级联的简单研究的更多相关文章
- jquery ajax请求后台 的简单例子
jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...
- jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- jQuery学习之jQuery Ajax用法详解(转)
[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...
- [转]Jquery Ajax用法
原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源: 时间 ...
- jQuery Ajax用法
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- jQuery学习之jQuery Ajax用法详解(转)
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- (高级篇)jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果
[C#]使用 C# 代码实现拓扑排序 目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
随机推荐
- GDUFE-OJ 1361校庆抽奖 翻转
Problem Description: 在舞台中央有一个开奖盒,开奖盒有一个按钮,和一个显示屏,每轮抽奖是过程是这样的. 主持人请K个幸运观众上台,编号为1~K,围着开奖盒. 首先开奖盒上随机显示一 ...
- sql中文日期格式转换(xxxx年x月x日)
) set @dd='2014年10月1日' select replace(replace( replace(@dd,'日',''),'月','-'),'年','-') 别人的方法 )='2012年1 ...
- nodejs httpserver
用nodejs服务器去拿取后台的数据.(我刚开始学的nodejs的时候是一个蒙圈的宝宝 t.t,开始接触的时候,在本地搭建去拿数据.之前菜鸟的我都不知道路由是神马[囧囧]). --> index ...
- hihoCoder 1430 : A Boring Problem(一琐繁题)
hihoCoder #1430 : A Boring Problem(一琐繁题) 时间限制:1000ms 单点时限:1000ms 内存限制:256MB Description - 题目描述 As a ...
- php : 基础(4)
流程控制 循环结构 循环的中断 循环中,有两种中断语句可以使用: break: 用于完全终止某个循环,让执行流程进入到循环语句后面的语句: continue: 用于停止当前正在进行的当次循环,而进入到 ...
- [bzoj1935][shoi2007]Tree 园丁的烦恼(树状数组+离线)
1935: [Shoi2007]Tree 园丁的烦恼 Time Limit: 15 Sec Memory Limit: 357 MBSubmit: 980 Solved: 450[Submit][ ...
- html在一个页面显示另一个页面的部分内容
老板今天让在网站上面显示实时监控画面,研究了一早,找了个简单的方法 先把监控分享在网上(我使用的海康威视摄像头,分享到萤石直播http://square.ys7.com/square/index.js ...
- winpcap抓包原理
winpcap抓包原理 WinPcap 是由伯克利分组捕获库派生而来的分组捕获库,它是在Windows 操作平台上来实现对底层包的截取过滤.WinPcap 是 BPF 模型和 Libpcap 函数库在 ...
- Linux json解析jq
jq是一个linux下很方便的json解析器,平时看json文件都是一行混在一起的,非常不适合阅读. https://stedolan.github.io/jq/download/ 直接到官网上下载, ...
- OCP笔记001
2. View the Exhibit to examine the description for the SALES table. Which views can have all DML ope ...