开发需求:一个修改产品信息的页面,需要从数据库读取数据到页面,然后JSP动态显示。页面中有一个下拉列表,这个列表也需要从数据库中读取,并且需要根据产品中的分类字段让下拉表默认选中相应的元素。
开发思路:当用户请求跳转这个页面时-->控制器接受请求,然后调用业务层取得产品数据-->返回给JSP页面-->页面中使用Ajax技术发送一个请求到控制器-->控制器取得产品分类数据-->返回给页面-->在页面中取得产品分类的id,通过js函数比对<select>中<option>的value属性,判断是否相等,如果相等则默认选中。(产品和产品分类为2张不同的表)
这个过程中遇到的最大的问题是:Ajax返回数据 和 js比对数据的时序性问题。JS函数比对信息必须在Ajax请求完成且服务器端发出响应后,而写JS代码测试的时候反复刷新偶尔才能获取到默认值,这不是我想要的效果。此问题的解决方案是:让这个onload的JS函数在执行过程中暂停XX毫秒,然后再继续,下面直接帖代码:
//js暂停函数
function Pause(obj,iMinSecond){
if (window.eventList==null) window.eventList=new Array();
var ind=-1;
for (var i=0;i<window.eventList.length;i++){
if (window.eventList[i]==null) {
window.eventList[i]=obj;
ind=i;
break;
}
}
if (ind==-1){
ind=window.eventList.length;
window.eventList[ind]=obj;
}
setTimeout("GoOn(" + ind + ")",iMinSecond);
}
//js继续函数
function GoOn(ind){
var obj=window.eventList[ind];
window.eventList[ind]=null;
if (obj.NextStep) obj.NextStep();
else obj();
}
调用过程为:
//选中系统分类
function checkSystemIdentity(param)
{
Pause(this,100);
this.NextStep = function(){
var systemTypes = document.getElementById('systemType');
for(i=0;i<systemTypes.options.length;i++){
var temp = systemTypes[i].value;
if(temp ==param){
systemTypes[i].selected="true";
}
}
}
}