jsp页面加载的时候，从后台获取数据，页面加载完成之后，下拉列表中已经有值

最新推荐文章于 2024-05-19 18:52:56 发布

好男儿心胸像大海

最新推荐文章于 2024-05-19 18:52:56 发布

阅读量7.9w

点赞数 4

分类专栏： web前段文章标签： jsp中通过js动态生成下拉列表获取后台

本文链接：https://blog.csdn.net/wangyi201212/article/details/42870009

版权

本文介绍了在jsp页面中如何实现在页面加载完成后下拉列表已有数据的场景。通过在标签中设置onload事件，调用fun()函数，利用ajax从后台获取json数据，遍历并动态生成下拉列表的option元素。

摘要由CSDN通过智能技术生成

在jsp中，我们经常会遇到这种情况：当页面加载完成之后，下拉列表中已经有数据，这是怎么实现的呢？

下面作以详解：

1.<body οnlοad="fun()">：在jsp的body里面有个onload事件，这个事件是在页面加载的时候起监听作用，调用某个函数（例如fun()函数)。因此我们可以通过fun函数从后台获取数据，显示在下拉列表中；

2.fun()函数怎么写呢：可以通过ajax技术，从后台获取数据（数据格式可以是json格式或其他，本人倾向于json格式），通过解析，放在下拉列表中，代码如下：

     <script >
	   function fun(){	<pre name="code" class="javascript">             $.ajax({
	  	    type:"POST",
	            url: "statisticInfo_getCategorys.do?id=" + id,//请求的url，问号后面是所带的参数；
	            dataType:'json',
	            async:false,
	            success:function(data){
		            data = eval(data.root);//必须通过eval函数才能解析成json数据，否则会报错
	            }
	    }); 
	 }

</script>
ps：a.获取的json数据必须通过eval函数才能转化为真正的json数据,因为json数据格式本身就有一个大括号{}，
如果不转的话，js会把数据当成一个语句块执行，转了之后才能当成表达式执行；
b.我们在后台获取的json数据格式一定要正确，否则不会执行到success:function(data){}；里面。大家可
以把后台获取的json数据打印出来放到json在线解析中验证一下是否正确；在线解析地址：
http://www.sojson.com/index.html
c:凡是字符串的一定带上双引号，数字的就没必要；
例如：

3.通过第二步已经获取到了json数据，那我们如何解析呢：

观察json数据，凡是用[ ]框起来的就算是一个数组，既然是数组就可以对数组进行遍历（第二步经过eval 得到的data）：

for(var i = 0; i < data.length; i++){

alert(data[i].name);

alert(data[i].id)

}

4.数据已经放到js页面，我们可以动态生成下拉列表：

a.select写成固定形式；

//注意：在事件中如果要调用两个函数，要用分号隔开，但是两个函数执行有先后顺序；

b.option动态生成：因为一个select中可以包含很多option（要根据后台获取的数据确定大小）

<pre name="code" class="html">       data = eval(data.root);
       var selection= document.getElementById("category");
       var firstOption=document.createElement("option");//创建
       firstOption.value = "-1";  
       firstOption.text = "--please select--";  
       selection.appendChild(firstOption);
       for (var i = 0; i < data.length; i++){
	 var _option = document.createElement("option");  
	 if(i == 0){
	   _option.selected = 1; 
	 }
	 _option.value = data[i].id;     <pre name="code" class="javascript"><pre name&