JSON进阶四-前后台交互之美
例如：以前我们做注册界面，我们需要写很多东西，在前端，我们要使用各种文本输入框，有些还要使用select,checkbox等，提供用户填写各种信息，无论在JSP中还是在APS.NET中，我们都要把前台文本框和后台赋值做一一对应。几个还好，十几个也能应付，几十个就感觉无聊了，我最不喜欢的就是做这类的东西。一旦要添加一个东西，就要修改HTML和后台代码，用表单提交的方式还好，用AJAX方式就麻烦了，不但要修改后台代码，还要修改JS，耦合度非常高，下面的例子就是小弟最近的一些编程心得，使用JSON来解决这个问题。
在此我用到了包括Jquery-1.2.6在内的四个js文件：(如果你对JQ不是很了解的话，可以看些园子里其他园友写的文章)
分别介绍下其他三个：
Json2.js 是一个老外写的把Json和字符串互相转换的JS（好像是EXT里的东西，不过我是在一个老外BLOG里找到的）。我对其做了一些扩展，这个以后再说吧。
Json2.parse(); // 把Json形式的字符串转换成Json对象(包括JSON数组形式)。
Json2.stringify(); //把Json对象转换成Json形式的字符串(包括JSON数组形式)。
Validator.js 是一个数据验证的js文件，我在日常工作中很多地方用到它，是我自己写的一个简单的验证，有兴趣的同学可以对他扩展。我在里面提供了，日期，数组，中文等验证方式。
TableSerializer.js 这个JS是的把表格里的元素转换成JSON，也能把JSON转换到表格中，这个JS还不够完善，有兴趣的同学可以扩展一下，或者把你的需求告诉我，我不断的完善它。
TableSerializer.TableToJson(); // 把表格里的填写项转换成Json数组
TableSerializer.JsonToTable(); // 把json数组转换成表格中的元素。
下例： (有兴趣的话你可以填写点信息操作下)
|
|
PSTS
|
|
|
|
|
PSTS
|
|
|
|
|
PSTS
|
|
|
|
|
PSTS
|
|
|
对应TableSerializer，必须符合的HTML结构：
< tr >
< td type ="text" >
< div type ="text" >
< input type ="text" msg ="*" key ="Guid" dataType ="ints" />
</ div >
</ td >
< td type ="checkbox" >
< div type ="checkbox" >
PSTS < input type ="checkbox" key ="PSTS" dataType ="int" />
</ div >
</ td >
< td >
< div type ="select" >
< select msg ="*" key ="GJ" dataType ="string" >
< option value ="" > 全部 </ option >
< option value ="中国" > 中国 </ option >
< option value ="美国" > 美国 </ option >
< option value ="日本" > 日本 </ option >
</ select >
</ div >
</ td >
< td >
< div type ="text" >
< input type ="text" msg ="*" key ="dt" dataType ="date" />
</ div >
</ td >
</ tr >
</ table >
可以看到，我在每个获得值的操作项外都嵌套类一个DIV，这类DIV都会有一个特殊属性type，这个type表示操作项HTML的类型。
在操作项中，会有一个key的属性，这个属性的值就表示Json的主键值，而dataType表示数据类型，msg表示如果数据输入类型没通过验证时所提示的错误信息。
Js代码：
var tab;
$(document).ready(
function () {
// 构造一个新的TableSerializer的JSON对象，并对指定需要转换成JSON数组形式，ID为’tab'的表格
tab = $.extend({}, TableSerializer, { IDs: ' #tab ' });
}
);
function a(){
// 获得ID为tab的表格中，指定格式内容的，JSON数组形式的字符串。
var str = tab.TableToJson();
// 判断是否通过数据类型验证。
if (tab.IsAllow){
// 把JSON一一对应赋予id为fa的表格中HTML项里。
TableSerializer.JsonToTab( " #fa " , JSON2.parse(str));
}
}
< / script>
到此为止，我们还是没有看到JSON和后台的交互。
其实很简单，我们只要把TableToJson()方法中获得的JSON数组形式的字符串发送的后台，就可以了。
这里我用到了C#的一个开源项目Newtonsoft.Json：
后台写法如下：
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load( object sender, EventArgs e)
{
// 在这里我使用的是AJAX形式，后台获得一串前台传递的JSON数组形式的字符串
if ( ! string .IsNullOrEmpty(Request[ " key " ])) {
// 反序列化
List < ss > sss = (List < ss > )JavaScriptConvert.DeserializeObject(Request[ " key " ], typeof (List < ss > ));
// 在序列化发送到前台。
Response.Write(sss.ToJSON());
Response.End();
}
}
}
// 对应前台输入内容的实体。
public class ss {
public int Guid;
public bool PSTS = true ;
public string GJ = string .Empty;
public DateTime dt;
}
// 把实体系列化成JSON形式字符串
public static class JsonHelper
{
public static string ToJSON( this object obj)
{
StringWriter sw = new StringWriter(System.Globalization.CultureInfo.InvariantCulture);
Newtonsoft.Json.JsonSerializer json = new Newtonsoft.Json.JsonSerializer();
json.NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore;
json.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
using (Newtonsoft.Json.JsonWriter jw = new Newtonsoft.Json.JsonTextWriter(sw))
{
json.Serialize(jw, obj);
}
return sw.ToString();
}
}
}
不难看出，无论需求如何改变，我们只需要改变后台的实体，以及前台HTML，而无需对前台的JS和后台代码做任何改动。