json实现前后台的相互传值详解_json
前后台的相互传值如果值太多,写的麻烦累人,且容易出错。这里整理出一套使用标记 标签属性的办法来传值, 后台取值和前台的绑定都有了大大的简化。
一、把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(',') '}';
休息;
case '数组':
var 结果 = [];
for (var i = 0; i var value = $.toJSONString(object[i]);
if (value !== undefined) results.push(value);
}
return '[' results.join(',') ']';
休息;
}
}
});
二、创建数据容器对象 [用于绑定要传给后台的前台控件值]
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 里面就包含了 所有前台传过来的值 想怎么用 就怎么用了。
string inp_2 = dic["subtag"]["inp_2"];//这样就直接取到了前台 页面 id为 inp_2 的 控件value 值
//=====================传值到前台============================================
Dictionary
dic2.Add("inp_1", "修改1");//这里只用对应控件id 传值即可
dic2.Add("inp_2", "修改2");
dic2.Add("inp_3", "修改3");
context.Response.Write(_jsSerializer.Serialize(dic2));
}
小伙伴们对使用json实现前后台传值是否了解清楚了呢,有问题的话,就给我留言吧

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

golangWebSocket与JSON的结合:实现数据传输和解析在现代的Web开发中,实时数据传输变得越来越重要。WebSocket是一种用于实现双向通信的协议,与传统的HTTP请求-响应模型不同,WebSocket允许服务器向客户端主动推送数据。而JSON(JavaScriptObjectNotation)是一种用于数据交换的轻量级格式,它简洁易读

Gson@Expose注解可用于标记字段是否公开(包含或不包含)以进行序列化或反序列化。@Expose注释可以采用两个参数,每个参数都是一个布尔值,可以采用值true或false。为了让GSON对@Expose注释做出反应,我们必须使用GsonBuilder类创建一个Gson实例,并且需要调用excludeFieldsWithoutExposeAnnotation()方法,它将Gson配置为排除所有没有Expose注释的字段进行序列化或反序列化。语法publicGsonBuilderexclud

MySQL5.7和MySQL8.0是两个不同的MySQL数据库版本,它们之间有以下一些主要区别:性能改进:MySQL8.0相对于MySQL5.7有一些性能改进。其中包括更好的查询优化器、更高效的查询执行计划生成、更好的索引算法和并行查询等。这些改进可以提高查询性能和整体系统性能。JSON支持:MySQL8.0引入了对JSON数据类型的原生支持,包括JSON数据的存储、查询和索引。这使得在MySQL中处理和操作JSON数据变得更加方便和高效。事务特性:MySQL8.0引入了一些新的事务特性,如原子

PHP数组转JSON的性能优化方法包括:使用JSON扩展和json_encode()函数;添加JSON_UNESCAPED_UNICODE选项以避免字符转义;使用缓冲区提高循环编码性能;缓存JSON编码结果;考虑使用第三方JSON编码库。

C#开发中如何处理XML和JSON数据格式,需要具体代码示例在现代软件开发中,XML和JSON是广泛应用的两种数据格式。XML(可扩展标记语言)是一种用于存储和传输数据的标记语言,而JSON(JavaScript对象表示)是一种轻量级的数据交换格式。在C#开发中,我们经常需要处理和操作XML和JSON数据,本文将重点介绍如何使用C#处理这两种数据格式,并附上

使用golang中的json.MarshalIndent函数将结构体转换为格式化的JSON字符串在使用Golang编写程序时,我们经常需要将结构体转换为JSON字符串,在这个过程中,json.MarshalIndent函数可以帮助我们实现格式化的输出。下面我们将详细介绍如何使用这个函数,并提供具体的代码示例。首先,让我们创建一个包含一些数据的结构体。以下是示

快速入门:Pandas读取JSON文件的方法,需要具体代码示例引言:在数据分析和数据科学领域,Pandas是一个重要的Python库之一。它提供了丰富的功能和灵活的数据结构,能够方便地对各种数据进行处理和分析。在实际应用中,我们经常会遇到需要读取JSON文件的情况。本文将介绍如何使用Pandas来读取JSON文件,并附上具体的代码示例。一、Pandas的安装

Jackson库中的注解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略属性@JsonProperty:指定名称@JsonGetter:使用获取方法@JsonSetter:使用设置方法反序列化:@JsonIgnoreProperties:忽略属性@JsonProperty:指定名称@JsonCreator:使用构造函数@JsonDeserialize:自定义逻辑
