json实现前后台的相互传值详解
投稿：hebedich
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了json实现前后台的相互传值详解,需要的朋友可以参考下
前后台的相互传值如果值太多，写的麻烦累人，且容易出错。这里整理出一套使用标记 标签属性的办法来传值， 后台取值和前台的绑定都有了大大的简化。
一、把json对象转成字符串
$.extend({
&&&&&&&& //将json对象转换成字符串&& [貌似jquery没有自带的这种方法]
&&&&&&&& toJSONString: function (object) {
&&&&&&&&&&&& if (object == null)
&&&&&&&&&&&&&&&&
&&&&&&&&&&&& var type =
&&&&&&&&&&&& 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':
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& case 'function':
&&&&&&&&&&&&&&&& case 'boolean':
&&&&&&&&&&&&&&&& case 'regexp':
&&&&&&&&&&&&&&&&&&&& return object.toString();
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& case 'number':
&&&&&&&&&&&&&&&&&&&& return isFinite(object) ? object.toString() : 'null';
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& case 'string':
&&&&&&&&&&&&&&&&&&&& return '"' + object.replace(/(, ", function () {
&&&&&&&&&&&&&&&&&&&&&&&& var a = arguments[0];
&&&&&&&&&&&&&&&&&&&&&&&& return (a == '\n') ? '\\n' : (a == '\r') ? '\\r' : (a == '\t') ? '\\t' : ""
&&&&&&&&&&&&&&&&&&&& }) + '"';
&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&& 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 'array':
&&&&&&&&&&&&&&&&&&&& var results = [];
&&&&&&&&&&&&&&&&&&&& for (var i = 0; i & object. 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 =&&&&&&&&&&& //地址
&&&&&&&&&&&&&&&& bdata.operation =//操作
&&&&&&&&&&&&&&&& bdata.params =&&&&& //参数
&&&&&&&&&&&&&&&& this.data.BasicData = //基本数据
&&&&&&&&&&&& },
&&&& //添加数据 如：addValue("obj", "111");
&&&& addValue: function (p, obj) {
&&&&&&&& this.data[p] =
&&&& //取得 所有标记控件的值 并写入数据
&&&& 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.
&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&& else if (this.type == "...") {
&&&&&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&&&&&& //......
&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&& else if (this.localName == "...") {
&&&&&&&&&&&&&&&&&&&& }
&&&&&&&&&&&&&&&&&&&& //................
&&&&&&&&&&&&&&&& });
&&&&&&&&&&&&&&&& this.data[togName] =//添加到数据集合
&&&&&&&&&&&& },
&&&& //取值 如：getValue("BasicData")
&&&& getValue: function (p) {
&&&&&&&&&&&&&&&& return this.data[p];
&&&&&&&&&&&& },
&&&& //获取或设置url
&&&& getUrl: function (url) {
&&&&&&&&&&&&&&&& if (url)
&&&&&&&&&&&&&&&&&&&& this.data.BasicData["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：
&&&&&&&& &th&一&/th&
&&&&&&&& &th&二&/th&
&&&&&&&& &th&三&/th&
&&&& &/tr&
&&&&&&&& &td id="td1"&&input type="text" id="inp_1" subtag="subtag" bindtag="bind" /&&/td&
&&&&&&&& &td id="td2"&&input type="text" id="inp_2" subtag="subtag" value="我只是测试一下下" /&&/td&
&&&&&&&& &td&&input type="text" id="inp_3" subtag="subtag" bindtag="bind" /&&/td&
&&&& &/tr&&&&&&&
&//====================使用示例======================================
&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&string, Dictionary&string, string&& dic = _jsSerializer.Deserialize&Dictionary&string, Dictionary&string, string&&&(values);
&&& //现在 dic 里面就包含了 所有前台传过来的值 想怎么用 就怎么用了。
&&& string inp_2 = dic["subtag"]["inp_2"];//这样就直接取到了前台 页面 id为 inp_2 的 控件value 值
&&& //=====================传值到前台============================================
&&& Dictionary&string, string& dic2 = new Dictionary&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实现前后台传值是否了解清楚了呢，有问题的话，就给我留言吧
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具11701人阅读
easy ui（2）
response.setContentType(&text/charset=UTF-8&);
Map map = new HashMap();
map.put(&name&, &testname&);
String json = JSONObject.fromObject(map).toString();
response.getWriter().write(json.toString());
response.getWriter().flush();
response.getWriter().close();
上面是后台返回的json对象，在前台取出name的值。
$.post(&../../strtgcObjctvs.do&,&ope=init&,function(data){
var json = eval(&(&+data+&)&); // data的值是json字符串，这行把字符串转成object
alert(json.name);// 取出属性值testname
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：54430次
排名：千里之外
原创：35篇
(1)(4)(1)(1)(2)(2)(5)(1)(6)(3)(11)springMVC在JSP页面取map值
在springmMVC中，页面取得map值。
在controller层：
Map map = new HashMap();
map.put(&key1&, &我是map值1&);
map.put(&key2&, &我是map值2&);
map.put(&key3&, &我是map值3&);
mv.addObject(&map&, map);
在jsp页面取值：
${m.key}-------------&${m.value }
效果截图：
这里需要在jsp页面加入jstl：
&%@taglib prefix=&c& uri=&/jsp/jstl/core&%&
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'如何用JavaScript获得后台传过来的参数啊 - ITeye问答
我的登陆页面是html的，登陆的时候我想做个提示，提交到后台后servlet里，如果密码不争取就用request.setAttribute来传一个值到登陆页面，问如何用JavaScript来获得这个参数。如果有别的解决方法也可以，谢谢了啊
采纳的答案
直接用EL语句${request}就可以获取到
后台：request.setAttribute("password",password);
前台页面：js中 ${password}
先把后台的值放在一个隐藏的INPUT 里面，然后再用document.all."input的ID".value,就可以取到这个值
可以在页面先用隐藏域&input type="hidden" name="pwd" value="${password} "&
然后再用js
document.getElementById('pwd');获得!
为什么要html的页面呢？是不是在做jsp啊？如果是jsp页面的话，我有办法。
这个问题完全可以用AJAX来实现，你到网上搜搜，很多这样的例子
已解决问题
未解决问题