对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 ...
随机推荐
- Spring获取bean的工具类
package com.tech.jin.util; import org.springframework.context.ApplicationContext; import org.springf ...
- laravel框架总结(九) -- 软删除
当模型被软删除时,它们并不会真的从数据库中被移除.而是会在模型上设置一个 deleted_at 属性并将其添加到数据库.如果对应模型被软删除,则deleted_at字段的值为删除时间,否则该值为空. ...
- Redis缓存连接池管理
import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.util.Assert;import ...
- C++Builder XE8_upd1破解安装成功纪要
1.先下载XE8,安装失败.2.后下载XE8U1(delphicbuilder_xe8_upd1_subscription.iso),安装,选择DelPhi.C++builder,输入系列号:3.安装 ...
- Unity手撸2048小游戏——自动生成4*4棋盘
1.新建文件夹,命prefabs,将刚刚做成的Chessman拖入该文件下,做成预制体 2.删除panel下的Chessman 3.在panel下,新建一个空对象,命名为Chessboard,大小设置 ...
- validate插件深入学习-02 常用方法和validate对象的方法
①检查表单元素是否有效 valid() 在表单内添加<button id="check">检查</button> $('#check').click(fun ...
- idea打包java可执行jar包
1,在项目上鼠标右键 --> Open Module Settings 2, Artifacts --> + --> JAR --> From modules with dep ...
- angularjs指令系统系列课程(3):替换replace,内容保留transclude,作用方式restrict
这一节我们主要看一下replace,transclude,restrict这三个参数 1.replace 可取值:bool 默认为:true 对于replace属性,设置为false表示原有指令标识不 ...
- Linux启动/停止/重启Mysql数据库的方法
1.查看mysql版本 方法一:status; 方法二:select version(); 2.Mysql启动.停止.重启常用命令 a.启动方式 1.使用 service 启动: [root@loca ...
- 微软图表控件MsChart使用
assemblies节点下:<add assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, ...