這是以前項目開發中用的JS-AJAX-JSON動態數據綁定
databind.js源碼
// JavaScript Document
//定義解析類
function DataBind(){};
//擴展類型
var extend_obj = {};
//給解析類增加變量與方法
DataBind.prototype={
selectList : new Array(),
radioList : new Array(),
lineNum : 0,
oddLineClass : "",
evenLineClass: "",
templateTxt : "",
isForm : false,
setLineClass : function(oddClass,evenClass)
{
this.oddLineClass=oddClass;
this.evenLineClass=evenClass;
},
setTemplateTxt : function(id)
{
var temp=document.getElementById(id);
if(temp)
this.templateTxt=temp.innerHTML;
this.lineNum=0;
},
setForm : function()
{
this.isForm=true;
},
getResultHtml : function(data,templateHtml,type)
{
var cdomhtml=templateHtml; //取綁定模板內容
var cdomhtmllen = cdomhtml.length; //模板長度
var beginchar = "@{"; //起始字符
var endchar = "}"; //結束字符
var endchar_t = "}";
var start = -1; //查找的開始位置
while(start<cdomhtmllen)
{
var startflag = cdomhtml.indexOf(beginchar,start+endchar_t.length); //查找起始標誌
if(startflag<0) break;
var endflag = cdomhtml.indexOf(endchar, startflag + beginchar.length); //查找結束標誌
if(endflag<0) break;
var fieldName = cdomhtml.substring(startflag+beginchar.length,endflag); //字段標誌,起始標誌佔兩位，所以起始位置爲startflag+2
if(fieldName!="")
{
var result = "";
if(type=="list")
result=this.replaceField(data,fieldName);
if(type=="form")
result=this.replaceForm(data,fieldName);
cdomhtml = cdomhtml.replace(beginchar+fieldName+endchar,result);
}
start = startflag; //重置搜索起始位置
cdomhtmllen = cdomhtml.length; //重置模板長度(模板內容經替換內容已改變)
}
return cdomhtml; //返回模板替換結果
},
replaceField : function(data,fieldname)
{
var separateFlag = "|"; //定義分隔符(用於返回對象的擴展）
var fieldSeparateFlag = ","; //定義多重字段分隔符
var result="";
var separateArr = fieldname.split(separateFlag); //分隔對象成數組
var extendFlag = separateArr.length>1?true:false; //擴展標誌（有擴展則爲true,沒有擴展則爲false）
if(extendFlag)
{
var funName=separateArr[1];
var para=separateArr[0];
if(para=="rownum")
if(this.lineNum % 2==0)
return this.evenLineClass;
else
return this.oddLineClass;
if(typeof extend_obj[funName]=="function") //判斷是否爲方法(function)
{
var fieldArr=para.split(fieldSeparateFlag); //分隔字段名稱
var filedArrLen= fieldArr.length;
var paraArr = new Array(filedArrLen);
var callback = extend_obj[funName] || function(){};
for(var i=0;i<filedArrLen;i++) //獲取多字段參數
{
paraArr[i] = data[fieldArr[i]];
}
return extend_obj[funName].call(null,paraArr[0],paraArr[1]);
}
}else{
if(fieldname!="rownum")
{
result=(data[fieldname]!=undefined&&data[fieldname]!=null&&data[fieldname]!="")?data[fieldname]:" ";
}
else
{
result=this.lineNum;
}
}
return result;
},
bindDataList : function(data,objid,callback)
{
var datalistLen=data.length;
var callback = callback || function(){};
var listInnerHtml="";
var templateObj=document.getElementById(objid);
if(templateObj==null)
{
return;
}
var templateHtml="";
this.lineNum=0;
if(this.templateTxt=="")
{
templateHtml=templateObj.innerHTML;
this.templateTxt=templateHtml;
}
else
templateHtml=this.templateTxt;
templateHtml=templateHtml.replace(/(%7B)/g,"{");
templateHtml=templateHtml.replace(/(%7D)/g,"}");
templateHtml=templateHtml.replace(/(%7C)/g,"|");
templateHtml=templateHtml.replace(/(%27)/g,"'");
for(var i=0;i<datalistLen;i++)
{
this.lineNum+=1;
listInnerHtml+=this.getResultHtml(data[i],templateHtml,"list");
}
templateObj.innerHTML=listInnerHtml;
callback();
},
replaceForm : function(data,fieldname)
{
var separateFlag = "|"; //定義分隔符(用於返回對象的擴展）
var result="";
var separateArr = fieldname.split(separateFlag); //分隔對象成數組
var arrLen=separateArr.length;
var extendFlag = arrLen>1?true:false; //擴展標誌（有擴展則爲true,沒有擴展則爲false）
if(extendFlag)
{
var para=separateArr[0]; //獲取參數，即字段
var funName=separateArr[1]; //用slice截取不包括最後一位，所以不用-1
var inputtype="text";
if(arrLen>=3)
inputtype=separateArr[2];
if(inputtype=="text")
{
if(typeof extend_obj[funName]=="function") //判斷是否爲方法(function)
{
var callback = extend_obj[funName] || function(){};
return callback(data[para]); //apply，第一個參數爲對象，這裏我們不需要綁定至特定對象，第二個參數必須爲數組
}
}
if(inputtype=="select")
{
var selectId="";
if(separateArr[3])
selectId=separateArr[3];
this.selectList.push([selectId,data[para]]);
result="";
}
if(inputtype=="radio")
{
var radioName="";
if(separateArr[3])
radioName=separateArr[3];
this.radioList.push([radioName,data[para]]);
result="";
}
}else{
var temp=""+data[fieldname];
if(temp!=undefined&&temp!=null&&temp!="")
result=temp.replace("/"",""");
else
if(!this.isForm)
result=" ";
else
if(document.all)
result="/"/"";
else
result="";
}
return result;
},
bindForm : function (data,objid,callback)
{
var templateObj=document.getElementById(objid);
var callback = callback || function(){};
var listInnerHtml="";
if(templateObj==null||templateObj.innerHTML=="")
{
return;
}
var templateHtml=templateObj.innerHTML;
if(this.templateTxt!="")
templateHtml=this.templateTxt;
templateHtml=templateHtml.replace(/(%7B)/g,"{");
templateHtml=templateHtml.replace(/(%7D)/g,"}");
templateHtml=templateHtml.replace(/(%7C)/g,"|");
listInnerHtml+=this.getResultHtml(data,templateHtml,"form");
templateObj.innerHTML=listInnerHtml;
var templen=(this.selectList).length;
if(templen>0)
{
for(var j=0;j<templen;j++)
{
this.resetSelectByValue(this.selectList[j][0],this.selectList[j][1]);
}
}
templen=(this.radioList).length;
if(templen>0)
{
for(var j=0;j<templen;j++)
{
this.resetRadioByValue(this.radioList[j][0],this.radioList[j][1]);
}
}
callback();
},
resetSelectByValue : function(selectId,optionValue)
{
var obj=document.getElementById(selectId);
var option="";
if(obj)
{
var len=obj.options.length;
for(var i=0;i<len;i++)
{
option=obj.options[i];
if(option.value==optionValue)
option.selected=true;
}
}
},
resetRadioByValue : function(radioName,radioValue)
{
var obj=document.getElementsByName(radioName);
if(obj)
{
var objlen=obj.length;
for(var i=0;i<objlen;i++)
{
if(obj[i].value==radioValue)
obj[i].checked=true;
}
}
}
}
測試數據
student.json
[{
name:'Lily',
sex :'女',
age :19
}, {
name:'Jane',
sex :'女',
age :20
}, {
name:'Jime',
sex :'男',
age :20
}, {
name:'Henily',
sex :'男',
age :19
}, {
name:'Amy',
sex :'女',
age :20
}]
Jime.json
{
name:'Jime',
sex :'女',
age :'20'
}
測試代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style>
*{margin:0px;padding:0px;}
ul li{display:inline-block; width:100px;}
</style>
<script type="text/javascript" src="databind.js"></script>
<script>
var listBind = new DataBind();
var xmlHttp;
//創建xmlhttprequest
function createXMLHttpRequest()
{
//如果是ie
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
//如果不是ie
else if (window.XMLHttpRequest)
{
return new XMLHttpRequest;
}
}
function initList()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
var list = eval("(" + xmlHttp.responseText + ")");
//第一個參數data,第二個爲數據塊div的id
listBind.bindDataList(list, "list");
}
}
}
//xml請求函數
function getList()
{
xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = initList;
var url = "student.json";
//初始化請求地址，方法等
xmlHttp.open("POST",url,true);
//發送請求
xmlHttp.send(null);
}
var formBind = new DataBind();
var formXmlHttp;
function getForm(){
formXmlHttp = createXMLHttpRequest();
formXmlHttp.onreadystatechange = initForm;
var url = "Jime.json";
formXmlHttp.open("POST", url, true);
formXmlHttp.send(null);
}
function initForm(){
if (formXmlHttp.readyState == 4)
{
if (formXmlHttp.status == 200)
{
var form = eval("(" + formXmlHttp.responseText + ")");
//第一個參數data,第二個爲數據塊div的id
formBind.bindForm(form, "form");
}
}
}
function initApp(){
getList();
getForm();
}
window.onload = initApp;
</script>
</head>
<body>
列表綁定
<br/>
<div id="list_content">
<ul>
<li>姓名</li>
<li>性別</li>
<li>年齡</li>
</ul>
<div id="list">
<ul>
<li>@{name}</li>
<li>@{sex}</li>
<li>@{age}</li>
</ul>
</div>
</div>
<br/><br/>
表單綁定
<br/>
<form id="form">
姓名:<input type="text" value="@{name}" /><br/>
性別:
<select id="sex" @{sex||select|sex}}>
<option value="男">男</option>
<option value="女">女</option>
</select><br/>
年齡:<input type="text" value="@{age}" />
</form>
</body>
</html>