前后台的相互传值如果值太多,写的麻烦累人,且容易出错。这里整理出一套使用标记 标签属性的办法来传值, 后台取值和前台的绑定都有了大大的简化。
一、把json对象转成字符串
复制代码 代码如下:
$.extend({
//将json对象转换成字符串 [貌似jquery没有自带的这种方法]
tojsonstring: function (object) {
if (object == null)
return;
var type = typeof object;
if ('object' == type) {
if (array == object.constructor) type = 'array';
else if (regexp == object.constructor) type = 'regexp';
else type = 'object';
}
switch (type) {
case 'undefined':
case 'unknown':
return;
break;
case 'function':
case 'boolean':
case 'regexp':
return object.tostring();
break;
case 'number':
return isfinite(object) ? object.tostring() : 'null';
break;
case 'string':
return '' + object.replace(/(\\|\)/g, \\$1).replace(/\n|\r|\t/g, function () {
var a = arguments[0];
return (a == '\n') ? '\\n' : (a == '\r') ? '\\r' : (a == '\t') ? '\\t' :
}) + '';
break;
case 'object':
if (object === null) return 'null';
var results = [];
for (var property in object) {
var value = $.tojsonstring(object[property]);
if (value !== undefined) results.push($.tojsonstring(property) + ':' + value);
}
return '{' + results.join(',') + '}';
break;
case 'array':
var results = [];
for (var i = 0; i var value = $.tojsonstring(object[i]);
if (value !== undefined) results.push(value);
}
return '[' + results.join(',') + ']';
break;
}
}
});
二、创建数据容器对象 [用来绑定要传给后台的前台控件值]
复制代码 代码如下:
var dataclass = {
create: function () {
return function () {
this.myinit.apply(this, arguments);//创建对象的构造函数 //arguments 参数集合 系统名称 不能写错
}
}
}
var mydatapack = dataclass.create();
mydatapack.prototype = {
//初始化
myinit: function (url, operation, params) {
this.data = new object(); //所有数据容量
var bdata = new object();
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) {
var values = object(); //值的集合
$([subtag=' + togname + ']).each(function () {
//如果是input 类型 控件
if (this.localname == input) {
//如果是text 控件
if (this.type == text || this.type == hidden) {
values[this.id] = this.value;
}
else if (this.type == ...) {
}
//......
}
else if (this.localname == ...) {
}
//................
});
this.data[togname] = values;//添加到数据集合
},
//取值 如:getvalue(basicdata)
getvalue: function (p) {
return this.data[p];
},
//获取或设置url
geturl: function (url) {
if (url)
this.data.basicdata[url] = url;
else
return this.data.basicdata[url];
}
,
//取值 转成字符串的对象 数据
getjsondata: function () {
return $.tojsonstring(this.data);
}
}
三、创建绑定前台数据对象 [用来读取后台传过来的值,并绑定到前台页面]
复制代码 代码如下:
var mydatabinder = {
//绑定数据到 控件 data:数据 tag:标签
bind: function (data, tag) {
var mjson = $.parsejson(data);
//只绑定 标记 了的 标签
$([bindtag=' + tag + ']).each(function () {
if (this.localname == input) {
if (mjson[this.id]) //如果后台传了值
$(this).attr(value, mjson[this.id]);
}
else if (this.localname == ...) {
}
//....
});
}
};
四、使用示例
前台html:
复制代码 代码如下:
一
二
三
前台js:
复制代码 代码如下:
//====================使用示例======================================
var mydatapack = new mydatapack(handler1.ashx, ceshi, );
mydatapack.getvaluesetdata(subtag);//将控件数据写入对象 “subtag”为要取 控件 值 的标签
//-------------------传前台值到后台---------------
$.post(mydatapack.geturl(), mydatapack.getjsondata(), function (data) {
//-------------------绑定后台值到前台-----------------
mydatabinder.bind(data, bind); //bind 为 要绑定控件的 标签
});
后台:
复制代码 代码如下:
public void processrequest(httpcontext context)
{
context.response.contenttype = text/plain;
//====================取前台值=============================================
//因为后台传过来的是 json对象 转换后的字符串 所以 所有数据都 做为一个参数传过来了
var values = context.request.form[0];
//需要引入程序集system.web.extensions.dll
javascriptserializer _jsserializer = new javascriptserializer();
//将 json 对象字符串 转成 dictionary 对象
dictionary> dic = _jsserializer.deserialize>>(values);
//现在 dic 里面就包含了 所有前台传过来的值 想怎么用 就怎么用了。
string inp_2 = dic[subtag][inp_2];//这样就直接取到了前台 页面 id为 inp_2 的 控件value 值
//=====================传值到前台============================================
dictionary dic2 = new dictionary();
dic2.add(inp_1, 修改1);//这里只用对应控件id 传值即可
dic2.add(inp_2, 修改2);
dic2.add(inp_3, 修改3);
context.response.write(_jsserializer.serialize(dic2));
}
小伙伴们对使用json实现前后台传值是否了解清楚了呢,有问题的话,就给我留言吧