对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 ...
随机推荐
- 逻辑回归算法的原理及实现(LR)
Logistic回归虽然名字叫"回归" ,但却是一种分类学习方法.使用场景大概有两个:第一用来预测,第二寻找因变量的影响因素.逻辑回归(Logistic Regression, L ...
- Solr atomic update JSON方式
http://yonik.com/solr/atomic-updates/ Solr supports several modifiers that atomically update values ...
- select 和 input 的不可编辑,input隐藏
select 没有readOnly属性 在jsp中 <select id="a" name="a" disabled="disabled&qu ...
- 学习_单片机/嵌入式_的资源链接。——Arvin
---恢复内容开始--- +单片机 -郭天祥的51单片机入门视频(链接: https://pan.baidu.com/s/1sl3xNDr 密码: 1zik) -51单片机20元购买资料公开(链接: ...
- swagger for c# webapi
最近迷上了前后端分离的开发架构,工作中的项目几乎都采取这种模式,自己主要担任服务端RestFul风格的Webapi开发.那么问题来了,当前端开发人员找我要api说明文档的时候,曾一度非常可耻的冒出过w ...
- 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% ...
- react+redux完整项目
地址:https://segmentfault.com/a/1190000007642740?utm_source=tuicool&utm_medium=referral
- sqoop、flume 安装
sqoop安装步骤 1.上传解压tar包 tar -zxvf sqoop-1.4.6.bin__hadoop-2.0.4-alpha.tar.gz 2.修改配置文件 进入 sqoop/conf/ c ...
- 初始Java 第一课程DVD项目
DVDSet 类: DVD DVD 删除功能 实现DVD借出功能 DVD还回功能
- MySQL问题记录--python插入中文至MySQL提示SQLErroor:1366错误
一.在爬虫脚本做以下操作仍提示错误:SQL Error: 1366: Incorrect string value: "\xd0\xc2\xce\xc5-" for column ...