使用jquery的ajax方法获取下拉列表值
AJAX 是一种用于创建快速动态网页的技术。
下面介绍两种动态加载DropDownList值的方法。
第一种:
View层
<select id="funcNum" name="funcNum"></select>
<script>
$(document).ready(function() {
showFuncId();
}
function showFuncId(){
$('#funcNum').empty();
var ciValue = $('#funcNum');
ciValue.append('<option value="">Pls Select</option>');
$.ajax({
url : u, //your actual url
type : 'post',
dataType : 'json',
success : function (opts) {
if (opts && opts.length > 0) {
var html = [];
for (var i = 0; i < opts.length; i++) {
html.push('<option value="'+opts[i].id+'">'+opts[i].desc+'</option>');
}
ciValue.append(html.join(''));
}
}
});
}
</script>
Controller层
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
PrintWriter writer = response.getWriter();
net.sf.json.JSONArray array = JSONArray.fromObject(new ArrayList());//The list that contains actual data,use a new arrayList instead here
writer.append(array.toString());
return null;
第二种:
View层
<select id="funcNum" name="funcNum"></select>
<script>
$(function(){
$.ajax({
type: 'POST',
url:url;//your actual url
dataType: 'json',
cache: false,
async:false,
success:function(data) {
$('#funcNum').get(0).options.length = 0;
$('#funcNum').append('<option value="">Pls Select</option>');
$.each(data, function(i, obj) {
var option = $('<option />');
option.val(obj.id);
option.text(obj.desc);
$('#funcNum').append(option);
});
},
error: function() {
alert("Error while getting func num results");
}
});
});
</script>
Controller层
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
PrintWriter writer = response.getWriter();
net.sf.json.JSONArray array = JSONArray.fromObject(new ArrayList());//The list that contains actual data,use a new arrayList instead here
writer.append(array.toString());
return null;
Note:
As JSON format supports the following data types .
1 |
Number double- precision floating-point format in JavaScript |
2 |
String double-quoted Unicode with backslash escaping |
3 |
Boolean true or false |
4 |
Array an ordered sequence of values |
5 |
Value it can be a string, a number, true or false, null etc |
6 |
Object an unordered collection of key:value pairs |
7 |
Whitespace can be used between any pair of tokens |
8 |
null empty |
for date value, need add config to fromObject, core code:
JsonConfig config = new JsonConfig();
config.registerJsonBeanProcessor(java.sql.Date.class, new JsDateJsonBeanProcessor());
JSONArray array = JSONArray.fromObject(object, config);
使用jquery的ajax方法获取下拉列表值的更多相关文章
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- 用jquery的ajax方法获取return返回值的正确姿势
如果jquery中,想要获取ajax的return返回值,必须注意两方面,ajax的同步异步问题,在ajax方法里面还是外面进行return返回值. 下面列举了三种写法,如果想成功获取到返回值,参考第 ...
- 用jquery的ajax方法获取不到return返回值
如果jquery中,获取不到ajax返回值. 两个错误写法会导致这种情况:1.ajax未用同步 2.在ajax方法中直接return返回值. 下面列举了三种写法,如果想成功获取到返回值,参考第三种写法 ...
- JQuery的ajax方法获取返回值得到了值还包含了不要的html源码 (Ajax相关知识)
因为后台使用了response.Write():这个方法,当输出完了以后,没有结束掉会继续输出,所以需要用到response.End():这样问题就解决了 jquery的ajax 除了通过url传值, ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- 使用Jquery解决Asp.Net中下拉列表值改变后访问服务器刷新界面。
使用DropDownList控件时,改变选项时,获取服务端数据库数据并刷新界面数据. 1. 绑定DropDownList控件SelectedIndexChanged事件. 2. AutoPortBac ...
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- ajax系列之用jQuery的ajax方法向服务器发出get和post请求
打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...
随机推荐
- [1-2] 把时间当做朋友(李笑来)Chapter 2 【开启自己的心智】 摘录
心智是可培养的.可发展的.甚至是可以重建的 早意识到,早些培养可以让自己起步更早些 审视一下我们自己,运用自己的心智,我们会知道每个人可以把自己划分为两部分:自己知道的与自己并不知道的.我们有的时候并 ...
- Centos下安装JDK、Maven和Git
原文地址:https://github.com/eacdy/spring-cloud-book/blob/master/3%20%E4%BD%BF%E7%94%A8Docker%E6%9E%84%E5 ...
- Jenkins spring boot 自动部署方案
原文地址:http://www.cnblogs.com/skyblog/p/5632869.html 现在主流的自动部署方案大都是基于Docker的了,但传统的自动部署方案比较适合中小型公司,下面的方 ...
- redis bgsave 内存不够
客户反应很慢,程序玩不了,登录服务器,查看,发现cpu/io正常,内存也还有,但是负载很离谱的飙高到了30多,查原因: 因为用了redis,最近redis数据增长量很大,而且优化过,怀疑是redis问 ...
- sql server 常用函数 及 方法
返回受上一语句影响的行数: @@ROWCOUNT 语法@@ROWCOUNT 返回类型integer 注释任何不返回行的语句将这一变量设置为 0 ,如 IF 语句. 示例下面的示例执行 UPDATE 语 ...
- Creating Context Menu / 创建上下文菜单项 / VC++, Windows, DLL, ATL, COM
创建上下文菜单项 1.新建一个ATL Project. 2.建议将Project Property中Linker – General - “Register Output” 设为no,C/C++ - ...
- Constant, random or timezone-dependent expressions in (sub)partitioning function are not allowed
错误原因:常量.随机或者依赖时区的表达式不能作为分区函数. 解决方法:把ts列换成datetime类型,创建成功. CREATE TABLE T_log( id INT(11) NOT NULL AU ...
- FreeBSD编译安装emacs,不要用ports
1. 解压emacs 2. 进入解压之后的目录,执行configure命令,大体配置如下: ./configure --with-x-toolkit=no --with-xpm=no --with-j ...
- [Tomcat]无法使用tomcat6.exe启动服务解决办法, The system cannot find the Registry key for service 'tomcat7'
重新配置环境变量后,可以使用startup.bat启动服务, 但是无法使用tomcat6.exe启动服务, 错误信息: [2011-03-10 18:51:49] [warn] The system ...
- 整合Thinkphp数据库基本操作CURD,界面datagrid采用EasyUi的Demo
1 <?php 2 class CurdAction extends Action{ 3 public function del($id){ 4 ...