原生JS生成动态select下拉框步骤

最新推荐文章于 2024-05-15 15:39:09 发布

2013学习的人

最新推荐文章于 2024-05-15 15:39:09 发布

阅读量3.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 异步实例 select ajax

本文链接：https://blog.csdn.net/jiangyw2014/article/details/23609913

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.加载页面时，应初始化下拉框数据

<body onLoad="init()" style="width:100%; height:100%; overflow:auto" >

2.数据来源于数据库，需调用后台去查询，利用ajax异步调用，这里利用公司封装好的方法调用

function init() {
	var pubRes = new Array(); 
	pubRes = callRemoteFunctionNoTrans("serviceRegionService","queryServiceRegionType");//封装好的方法可在后面带参数
	var srtEle  =  document.getElementById("txtSrvRegionType"); 
	//遍历得到的数组对象,填充下拉框,js中无list类型
    	for(var i = 0 ;i < pubRes.length;i ++ ) {   
		var option  =  document.createElement("option");   
		var text  =  document.createTextNode(pubRes[i].descChina);   
		option.appendChild(text);   
		option.value = pubRes[i].serialNo;   
		srtEle.appendChild(option);    
    	}
}

3.封装的callRemoteFunctionNoTrans(...)方法,传入的参数是spring中配置的, 必须配置, 否则不行

function callRemoteFunctionNoTrans(serviceName,funcName){
	  var URL="/ResService/busifacadeservlet";
	  var doc = makeDOM();

	  var node = doc.createProcessingInstruction("xml","version='1.0'");
	  doc.appendChild(node);
	  node = doc.appendChild(doc.createElement("Function"));
	  node.setAttribute("name",funcName);
	  node.setAttribute("serviceName",serviceName);

	  for(var i=2;i<arguments.length;i++){
	    var elm = doc.createElement("Param");
	    var type = getObjectType(arguments[i]);
	    elm.setAttribute("type", type);
	    packageObject(elm, type, arguments[i]);
	    node.appendChild(elm);
	  }
	  //window.prompt("xml", doc.xml);
	  //发送到后台
	  var retVal;
	  var xmlHttp = new ActiveXObject("Microsoft.XmlHttp");
	  xmlHttp.open("POST", URL, false);
	  xmlHttp.send(doc.xml);
	  if(xmlHttp.status!=200){
	    throw new Error(0,"Network issue or remote server issue");
	    return;
	  }else retVal = xmlHttp.responseText;
	  //window.prompt("xml", retVal);
	  //xml转为object
	  doc = makeDOM();
	  try{
	    if(!doc.loadXML(retVal)){
	      throw new Error(0,"发生系统异常，请联系系统管理员！");
	      return;
	    }
	    node = doc.documentElement;
	    switch(node.tagName){
	      case "Output":
		return getObjectFromXml(node,node.getAttribute("type"));
	      case "Error":
		throw packageError(node);
	      default:
		throw new Error(0,"发生系统异常，请联系系统管理员！");
	    }
	  }
	  finally{
	    retVal = xmlHttp = node = doc = null;
	  }
}

<!--private -->
function IsInt(num){
  return ((num%1)==0)
}

function getObjectType(obj){
	  //n=null,b,i,f,s,d,o,a
	  if(obj == null) return 'n';
	  if(obj.constructor.toString().indexOf("Date")>0) return 'd';
	  if(obj.constructor.toString().indexOf("Array")>0) return 'a';
	  switch(obj.constructor){
	    case Number:
	      if(IsNumberInt(obj))
		return 'i';
	      else
		return 'f';
	      break;
	    case Boolean:
	      return 'b';
	      break;
	    case String:
	      return 's';
	      break;
	    case Date:
	      return 'd';
	      break;
	    case Array:
	      return 'a';
	      break;
	    default:
	      return 'o';
	      break;
	  }
}

function packageObject(elm,type,arg){
	  switch(type){
	    case 'n':
	      break;
	    case 'b':
	    case 'i':
	    case 'l':
	    case 'f':
	    case 's':
	      elm.text = strEncoded(arg.toString());
	      break;
	    case 'd':
	      elm.text = dateToString(arg);
	      break;
	    case 'o':
	      for(var key in arg){
		var child =arg[key];
		var subtype = getObjectType(child);
		//it's empty deal to its minValue in b/i/f
		
	      //wangcc modify 201002021537 BEGIN
		if(typeof child!="function"){//function就不要分装了
		var childElm = elm.ownerDocument.createElement(subtype+key);
		elm.appendChild(childElm);
		packageObject(childElm,subtype,child);
	      }
	       //wangcc modify 201002021537 END
	      }
	      break;
	    case 'a':
	      for(var i=0;i<arg.length;i++){
		var child =arg[i];
		var subtype = getObjectType(child);
		var childElm = elm.ownerDocument.createElement(subtype+"Item");
		elm.appendChild(childElm);
		packageObject(childElm,subtype,child);
	      }
	      break;
	   }
}



function getObjectFromXml(elm,type){
	  if(type==null) return null;
	  switch(type){
	    case 'n':
	    case 'v':
	      return null;
	    case 'b':
	    case 'B':
	      return (elm.text=="true");
	    case 'i':
	    case 'I':
	    case 'l':
	    case 'L':
	      var val = parseInt(elm.text);
	      if(isNaN(val)) throw elm.tagName+" must be an integer";
	      return val;
	    case 'f':
	    case 'F':
	      var val = parseFloat(elm.text);
	      if(isNaN(val)) throw elm.tagName+" must be an float";
	      return val;
	    case 's':
	    case 'S':
	      return elm.text;
	    case 'd':
	    case 'D':
	      try{
		return parseDate(elm.text);
	      }catch(ex){
		throw elm.tagName+"must be in a DateTime format(yyyy-MM-dd HH:mm:ss)";
	      }
	  case 'o':
	    {
	      var obj = new Object();
	      var nodes = elm.childNodes;
	      for(var i=0;i<nodes.length;i++){
		var child = nodes[i];
		if(child.nodeType==1){//NODE_ELEMENT
		  var childtype = child.tagName.charAt(0);
		  var key = child.tagName.substring(1);
		  obj[key] = getObjectFromXml(child,childtype);
		}
	      }
	      return  obj;
	    }
	  case 'a':
	    {
	      var arr = new Array();
	      var nodes = elm.childNodes;
	      for(var i=0;i<nodes.length;i++){
		var child = nodes[i];
		if(child.nodeType==1){//NODE_ELEMENT
		  var childtype = child.tagName.charAt(0);
		  var key = child.tagName.substring(1);
		  if(key=="Item"){
		    arr[arr.length] = getObjectFromXml(child,childtype);
		  }
		}
	      }
	      return arr;
	    }
	  default:
	    throw "type '"+ type +"' can't be recognized";
	  }
}

function parseDate(str){
	  var arrDate = str.split(/[\/\-: ]/);
	  if(arrDate.length<6) throw "Invalid DateTime format";
	  var d = new Date(arrDate[0],parseInt(arrDate[1]-1),arrDate[2],arrDate[3],arrDate[4],arrDate[5]);
	  if(isNaN(d))
	    throw "Invalid DateTime format";
	  return d;
}

function parseDateStr(str){
	  var yearStr =  str.substring(0,4);
	  var monthStr  = str.substring(5,7);
	  var dayStr  =  str.substring(8,10);
	  var dDay = new Date(yearStr,monthStr-1,dayStr);
	   return dDay;
}

function dateToString(d){
  return d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
}

/*  特殊字符编码 */
function strEncoded(str){
	  if(str!=null){
	    //str = str.replace("\"", dq);
	    //str = str.replace(/'/g, "’");
	    //str = str.replace(/"/g, "”");
	    //str = str.replace("\\", tq);
	    //str = str.replace("=", eq);
	    //str = str.replace(/</g, "＜");
	    //str = str.replace(/>/g, "＞");
	    //str = str.replace(/&/g, "＆");
	  }else{
	    str="";
	  }
	  return str;
}

function StrEnCode(s){
  return (s)? s.replace(/'/g, "’").replace(/"/g, "”").replace(/</g, "＜").replace(/>/g, "＞").replace(/&/g, "＆") : "";
}

4.封装的servlet方法

public class BusiFacadeServlet extends HttpServlet {
    /**
     * 
     */
    private static final long serialVersionUID = 1581438754814059524L;
    
    private static Logger _logger = Logger.getLogger(BusiFacadeServlet.class);
    // 字符集设置
    private static final String LOCAL_CHARSET = "GBK";

    /** Initialize global variables */
    public void init() throws ServletException {
        super.init();
    }

    /**
     * 统一服务方法
     * 
     * @param request
     *            HttpServletRequest
     * @param response
     *            HttpServletResponse
     * @throws ServletException
     * @throws IOException
     */
    public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding(LOCAL_CHARSET);
        response.setContentType("text/html; charset=" + LOCAL_CHARSET);
        Long tid = Thread.currentThread().getId();
        String returnValue = null;
        try {
            _logger.info("[" + tid + "]service begin.....");//打印日志信息便于查bug
            WebApplicationContext ctx = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());
            returnValue = ExecutionFactory.execute(request, response, ctx);
        } catch (UOSException e) {
            _logger.error(e.getError(), e);
            returnValue = e.getMessage();
        } finally {
            _logger.debug("[" + tid + "]sreturnValue=" + returnValue);
            _logger.info("[" + tid + "]service end.....");
        }
        PrintWriter out = response.getWriter();
        out.print(returnValue);
        out.close();
    }

    /** Clean up resources */
    public void destroy() {
        super.destroy();
    }
}

5.封装的makeDOM()方法

function makeDOM(){
	var o,suffixs=[".4.0",".3.0",".2.0",""];
	for(var i=0;i<suffixs.length;i++){
	try{
	o=new ActiveXObject("msxml2.DOMDocument"+suffixs[i]);
	break;
	}catch(ex){};
	}
	try{
	o.async=false;
	o.validateOnParse=false;
	o.resolveExternals=false;
	}catch(e){alert(e.description);}
	return o;
}

有地方不能通过或者有缺少什么封装的方法的可以留言，这里提供了一个很好的封装就是前端js可以直接调用Spring配置的service