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结构：

<table id="tab">
<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代码：

<script>
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：

后台写法如下：

namespace WebApplication1
{
    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和后台代码做任何改动。

 示例代码