首页 > 代码库 > 使用jquery的ajax方法获取下拉列表值

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

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,用户体验非常好。

下面介绍两种动态加载DropDownList值的方法。

第一种:

View层

<select id="funcNum" name="funcNum"></select><script>$(document).ready(function() { showFuncId();}function showFuncId(){ $(‘#funcNum‘).empty(); var ciValue = http://www.mamicode.com/$(‘#funcNum‘); "">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="http://www.mamicode.com/‘+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 vehicle type 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;

  

 

  

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