在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写成固定形式;
//注意:在事件中如果要调用两个函数,要用分号隔开,但是两个函数执行有先后顺序;
<select id="category" οnchange="fun1();fun2()"></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&