原生JS生成动态select下拉框步骤
2014-04-13 18:01
531 查看
1.加载页面时，应初始化下拉框数据
2.数据来源于数据库，需调用后台去查询，利用ajax异步调用，这里利用公司封装好的方法调用
3.封装的callRemoteFunctionNoTrans(...)方法,传入的参数是spring中配置的, 必须配置, 否则不行
4.封装的servlet方法
5.封装的makeDOM()方法
有地方不能通过或者有缺少什么封装的方法的可以留言，这里提供了一个很好的封装就是前端js可以直接调用Spring配置的service
<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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- IE8开发人员工具教程（二）
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- 交换机升级排障实例
- Dom在ajax技术中的作用说明
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa
- javascript asp教程第十一课--Application 对象
- 探讨Ajax中同步与异步之间的区别
- SQL学习笔记三 select语句的各种形式小结