AJAX 是一種用于建立快速動态網頁的技術。
通過在背景與伺服器進行少量資料交換，AJAX 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新,使用者體驗非常好。
下面介紹兩種動态加載DropDownList值的方法。
第一種：
View層
$(document).ready(function() {
showFuncId();
}
function showFuncId(){
$(‘#funcNum‘).empty();
var ciValue = $(‘#funcNum‘);
ciValue.append(‘Pls Select‘);
$.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(‘‘+opts[i].desc+‘‘);
}
ciValue.append(html.join(‘‘));
}
}
});
}
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層
$(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(‘Pls Select‘);
$.each(data, function(i, obj) {
var option = $(‘‘);
option.val(obj.id);
option.text(obj.desc);
$(‘#funcNum‘).append(option);
});
},
error: function() {
alert("Error while getting vehicle type results");
}
});
});
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;