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);