使用jquery的ajax方法获取下拉列表值

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