json实现前后台的相互传值详解
前后台的相互传值如果值太多，写的麻烦累人，且容易出错。这里整理出一套使用标记标签属性的办法来传值，后台取值和前台的绑定都有了大大的简化。
一、把json对象转成字符串
$.extend({
//将json对象转换成字符串 [貌似jquery没有自带的这种方法]
toJSONString:function(object){
if(object==null)
return;
vartype=typeofobject;
if('object'==type){
if(Array==object.constructor)type='array';
elseif(RegExp==object.constructor)type='regexp';
elsetype='object';
}
switch(type){
case'undefined':
case'unknown':
return;
break;
case'function':
case'boolean':
case'regexp':
returnobject.toString();
break;
case'number':
returnisFinite(object)?object.toString():'null';
break;
case'string':
return'"'+object.replace(/(\\|\")/g,"\\$1").replace(/\n|\r|\t/g,function(){
vara=arguments[0];
return(a=='\n')?'\\n':(a=='\r')?'\\r':(a=='\t')?'\\t':""
})+'"';
break;
case'object':
if(object===null)return'null';
varresults=[];
for(varpropertyinobject){
varvalue=$.toJSONString(object[property]);
if(value!==undefined)results.push($.toJSONString(property)+':'+value);
}
return'{'+results.join(',')+'}';
break;
case'array':
varresults=[];
for(vari=0;i<object.length;i++){
varvalue=$.toJSONString(object[i]);
if(value!==undefined)results.push(value);
}
return'['+results.join(',')+']';
break;
}
}
});
二、创建数据容器对象[用来绑定要传给后台的前台控件值]
varDataClass={
create:function(){
returnfunction(){
this.MyInit.apply(this,arguments);//创建对象的构造函数 //arguments参数集合 系统名称不能写错
}
}
}
varMyDataPack=DataClass.create();
MyDataPack.prototype={
//初始化
MyInit:function(url,operation,params){
this.data=newObject(); //所有数据容量
varbdata=newObject();
bdata.url=url; //地址
bdata.operation=operation;//操作
bdata.params=params; //参数
this.data.BasicData=bdata;//基本数据
},
//添加数据如：addValue("obj","111");
addValue:function(p,obj){
this.data[p]=obj;
},
//取得所有标记控件的值并写入数据
getValueSetData:function(togName){
varvalues=Object();//值的集合
$("[subtag='"+togName+"']").each(function(){
//如果是input类型控件
if(this.localName=="input"){
//如果是text控件
if(this.type=="text"||this.type=="hidden"){
values[this.id]=this.value;
}
elseif(this.type=="..."){
}
//......
}
elseif(this.localName=="..."){
}
//................
});
this.data[togName]=values;//添加到数据集合
},
//取值如：getValue("BasicData")
getValue:function(p){
returnthis.data[p];
},
//获取或设置url
getUrl:function(url){
if(url)
this.data.BasicData["url"]=url;
else
returnthis.data.BasicData["url"];
}
,
//取值转成字符串的对象数据
getJsonData:function(){
return$.toJSONString(this.data);
}
}
三、创建绑定前台数据对象[用来读取后台传过来的值，并绑定到前台页面]
varMyDataBinder={
//绑定数据到控件data：数据tag：标签
Bind:function(data,Tag){
varMJson=$.parseJSON(data);
//只绑定标记了的标签
$("[bindtag='"+Tag+"']").each(function(){
if(this.localName=="input"){
if(MJson[this.id])//如果后台传了值
$(this).attr("value",MJson[this.id]);
}
elseif(this.localName=="..."){
}
//....
});
}
};
四、使用示例
前台html：
<table>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
</tr>
<tr>
<tdid="td1"><inputtype="text"id="inp_1"subtag="subtag"bindtag="bind"/></td>
<tdid="td2"><inputtype="text"id="inp_2"subtag="subtag"value="我只是测试一下下"/></td>
<td><inputtype="text"id="inp_3"subtag="subtag"bindtag="bind"/></td>
</tr>
</table>
前台js：
//====================使用示例======================================
varMyDataPack=newMyDataPack("Handler1.ashx","CESHI","");
MyDataPack.getValueSetData("subtag");//将控件数据写入对象 “subtag”为要取控件值的标签
//-------------------传前台值到后台---------------
$.post(MyDataPack.getUrl(),MyDataPack.getJsonData(),function(data){
//-------------------绑定后台值到前台-----------------
MyDataBinder.Bind(data,"bind"); //"bind"为要绑定控件的标签
});
后台：
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
//====================取前台值=============================================
//因为后台传过来的是json对象转换后的字符串 所以所有数据都做为一个参数传过来了
varvalues=context.Request.Form[0];
//需要引入程序集System.Web.Extensions.dll
JavaScriptSerializer_jsSerializer=newJavaScriptSerializer();
//将json对象字符串 转成Dictionary对象
Dictionary<string,Dictionary<string,string>>dic=_jsSerializer.Deserialize<Dictionary<string,Dictionary<string,string>>>(values);
//现在dic里面就包含了所有前台传过来的值想怎么用就怎么用了。
stringinp_2=dic["subtag"]["inp_2"];//这样就直接取到了前台页面id为inp_2的控件value值
//=====================传值到前台============================================
Dictionary<string,string>dic2=newDictionary<string,string>();
dic2.Add("inp_1","修改1");//这里只用对应控件id传值即可
dic2.Add("inp_2","修改2");
dic2.Add("inp_3","修改3");
context.Response.Write(_jsSerializer.Serialize(dic2));
}
小伙伴们对使用json实现前后台传值是否了解清楚了呢，有问题的话，就给我留言吧