JSON进阶四-前后台交互之美

核心提示： 可以看到，我在每个获得值的操作项外都嵌套类一个DIV，JSON进阶四-前后台交互之美(3)，这类DIV都会有一个特殊属性type，这个type表示操作项HTML的类型，我们只需要改变后台的实体，以及前台HTML，在操作项中，会有一个key的属性

可以看到，我在每个获得值的操作项外都嵌套类一个DIV，这类DIV都会有一个特殊属性type，这个type表示操作项HTML的类型。

在操作项中，会有一个key的属性，这个属性的值就表示Json的主键值，而dataType表示数据类型，msg表示如果数据输入类型没通过验证时所提示的错误信息。

Js代码：

<script>
vartab;
$(document).ready(
　function(){
　　//构造一个新的TableSerializer的JSON对象，并对指定需要转换成JSON数组形式，ID为’tab'的表格
　　tab=$.extend({},TableSerializer,{IDs:'#tab'});
　}
);
functiona(){
　//获得ID为tab的表格中，指定格式内容的，JSON数组形式的字符串。
　varstr=tab.TableToJson();
　//判断是否通过数据类型验证。
　if(tab.IsAllow){
　　//把JSON一一对应赋予id为fa的表格中HTML项里。
　　TableSerializer.JsonToTab("#fa",JSON2.parse(str));
　}
}
</script>

到此为止，我们还是没有看到JSON和后台的交互。

其实很简单，我们只要把TableToJson()方法中获得的JSON数组形式的字符串发送的后台，就可以了。

这里我用到了C#的一个开源项目Newtonsoft.Json：

后台写法如下：

namespaceWebApplication1
{
　　publicpartialclass_Default:System.Web.UI.Page
　　{
　　　　protectedvoidPage_Load(objectsender,EventArgse)
　　　　{
　　　　　//在这里我使用的是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();
　　　　　　}
　　　　}
　　}
　　//对应前台输入内容的实体。
　　publicclassss{
　　　　publicintGuid;
　　　　publicboolPSTS=true;
　　　　publicstringGJ=string.Empty;
　　　　publicDateTimedt;
　　}
　　//把实体系列化成JSON形式字符串
　　publicstaticclassJsonHelper
　　{
　　　　publicstaticstringToJSON(thisobjectobj)
　　　　{
　　　　　　StringWritersw=newStringWriter(System.Globalization.CultureInfo.InvariantCulture);
　　　　　　Newtonsoft.Json.JsonSerializerjson=newNewtonsoft.Json.JsonSerializer();
　　　　　　json.NullValueHandling=Newtonsoft.Json.NullValueHandling.Ignore;
　　　　　　json.ReferenceLoopHandling=Newtonsoft.Json.ReferenceLoopHandling.Ignore;
　　　　　　using(Newtonsoft.Json.JsonWriterjw=newNewtonsoft.Json.JsonTextWriter(sw))
　　　　　　{
　　　　　　　　json.Serialize(jw,obj);
　　　　　　}
　　　　　　returnsw.ToString();
　　　　}
　　}
}

不难看出，无论需求如何改变，我们只需要改变后台的实体，以及前台HTML，而无需对前台的JS和后台代码做任何改动。