开发日志系列：一个表单页面的呈现与提交（一）——JSON的操作

JSON操作

引子

最近在做一个表单页面，大概是这个样子的

这里打算用一个JSON存储所有的信息，我们可以理解为，所有东西都存在一个字符串里面。方便，快捷，易读，数据库操作也方便了。甚至，可以将很多不同页面的数据存在同一个数据库同一个表内。

比如说，本页面的JSON格式如下：

 {
     "其他信息": [
         {
             "title": "修改时间",
             "text": "2015-8-12 10:00"
         },
         {
             "title": "作者",
             "text": "zztdan"
         }
     ],
     "管理目标": [
         {
             "title": "XXXXXXXX",
             "text": "XXXXXXXXXXXXXXXXXXXXXXXXXXX"
         }     ],
     "各车间科室目标": [
         {
             "title": "XXXXX",
             "text": "X1XXXXX0XXX2XXXXXXXXXXX80XXX3XXXXXXXXX0XXX4XXXXXXXXXX100%X"
         },
         {
             "title": "XXXX",
             "text": "X1XXXXXXXXXXX80XXX2XXXXXXXXX0XXX3XXXXXXXXXX100%X"
         }     ]
 }

一、JS里面定义类

为了方便网站所有页面操作，我将所有的有关JSON的函数全部写出，列在一个js里面，进行调用。这样方便，通用性也好。

首先，我们放在js里面，最好写成类（或者说命名空间）的形式，而不是散装的函数。这样不容易引起冲突。

先来看如何在JS文件里写类：

 JSONfunc = function ()
 {
 var _privatestr="privatestr";//私有化的属性
 var _prinumber=1234;//私有化的属性
 this.publicstr="publicstr";//公共的属性
 this.func1=function(){};//公共的函数
  }

 JSONfunc.staticstr="staticstr";//类似于静态属性

 JSONfunc.LoadJSON = function (_url)//类似于静态函数
 {
     var ret;
     $.ajax({
         type: "get",
         url: _url,
         dataType: "json",
         async: false,
         success: function (jsonobj)
         {
             ret = jsonobj;
         },
         error: function (err)
         {
             debugger;
             ret = err;
         }
     });
     return ret;
 }

将函数，属性等写在类定义里面，则要使用这些函数，类，必须先实例化该函数，我们对比：

 JSONfunc = function ()
 { }

 JSONfunc.LoadJSON = function (_url)
 {
     var ret;
     $.ajax({
         type: "get",
         url: _url,
         dataType: "json",
         async: false,
         success: function (jsonobj)
         {
             ret = jsonobj;
         },
         error: function (err)
         {
             debugger;
             ret = err;
         }
     });
     return ret;
 }

 //-----------------------------------------------------------------------

 JSONfunc = function ()
 { 

 JSONfunc.LoadJSON = function (_url)
 {
     var ret;
     $.ajax({
         type: "get",
         url: _url,
         dataType: "json",
         async: false,
         success: function (jsonobj)
         {
             ret = jsonobj;
         },
         error: function (err)
         {
             debugger;
             ret = err;
         }
     });
     return ret;
 }

 }

这两种命名方式，前者可以直接调用JSONfunc.LoadJSON，后者必须先var kk=new JSONfunc();才能调用kk.LoadJSON。其调用方法和C#，JAVA里面的类规则是一致的。而在类定义里面通过var等方式定义的属性，函数（而不是用this），则相当于是private的，外部无论如何也无法访问。

二、从文件中读取类

JSONfunc.LoadJSON = function (_url)
{
    var ret;
    $.ajax({
        type: "get",
        url: _url,
        dataType: "json",
        async: false,
        success: function (jsonobj)
        {
            ret = jsonobj;
        },
        error: function (err)
        {
            debugger;
            ret = err;
        }
    });
    return ret;
}//该函数返回的就是JSON对象，而不是字串

这里要注意的是async=false，如果不设置这个，那么该函数之后的语句会并行执行，下一个语句如果要调用这个JSON，肯定会出错，因为你还没读完呢，就执行到下一句去了。

三、JSON与字符串互换

JSON作为对象与字符串优秀的互异性是其流行的主要原因，很多时候不能传递对象的场合，却可以传递字符串，那么JSON也就可以传递。该函数用到了JQUERY

JSONfunc.JSONtoSTR = function (jsonobj)
{
    return JSON.stringify(jsonobj);
}
JSONfunc.STRtoJSON = function (strobj)
{
    return JSON.parse(strobj);
}

四、JSON与数据库的交互(Ajax)

将JSON作为字符串直接存入数据库不失为一种存储方案。但是某些排列，筛选的键值还是需要提取出来。由于本次网页只有表单名称和时间戳作为键值，所以数据库就很简单了：

(1)前台命令

前台传递给后台的是一个表单（使用$.ajax函数），或者说，是一群键值对，或者说是结构单一的JSON，下面是一个这类型的JSON的示范以及函数调用：

var _name = "EnvironmentSys";

var _jsonobj = strJson;//已经转换好的str格式的json
var _form = { "action": "SaveJsonToDB", "name": _name, "JSONDATA": _jsonobj };
JSONfunc.postJsontoHandler(_form);

下面是所要调用的Ajax函数：

 JSONfunc.postJsontoHandler = function (formkk)
 {
     var ret = "";

     $.ajax({
         type: "post", //要用post方式
         url: "/ajax/JsonHandler.aspx?r=" + Math.ceil(Math.random() * 10000),//插入一个随机数
         //contentType: "application/json; charset=utf-8",
         //dataType: "json",
         data: formkk,//表单内容可以随意定制。注意，这里要求的表单是对象，而不是字符串，传递进来的formkk就是一个对象，如果这里输入字符串那么后台不能成功读取
         async: false,
         success: function (d)
         {
             ret = d;
         },
         error: function (err)
         {
             ret = err.responseText;
         }
     });
     return ret;
 }

注意：

• 可以在web.config里面管理http管道，截获这个网页请求，然后将其导向需要的dll，但是我不想那么麻烦，所以直接将请求指向了一个有后台代码的aspx。当然你可以指向任何阿猫阿狗，这样你就需要写web.config了，还要将相应的函数封装成dll，想想都累。
• 在请求地址后面加入一个随机数，可以使得浏览器忽略缓存，直接访问该页面本身。浏览器是很懒的，如果它发现它已经请求过这个页面了，它会直接读取缓存中这个页面返回的结果，也就是你以前的请求结果。无论你将目标页面改的面目全非，它都不看一眼。只有让他认为这是个全新页面，它才会认真地发送请求。

（2）后台代码

 public partial class ajax_JsonHandler : System.Web.UI.Page {
     protected void Page_Load(object sender, EventArgs e) {

         switch (Request["action"]) {
             case ("SaveJsonToDB"): {//将json存入固定的数据库位置，提供用户名和存入时间
                     SaveJson save = new SaveJson(Request["name"], Request["JSONDATA"]);
                     string saveDB = save.SaveDB();
                     Response.Write(saveDB);
                     Response.End();
                     break;
                 }

             default: { break; }
         }
     }
 }
 public class SaveJson {
     private string _name;
     private string _url;
     private string _jsonobj;
     public SaveJson(string name, string url, string jsonobj) {
         _name = name;
         _url = url;
         _jsonobj = jsonobj;
     }
     public SaveJson(string name, string jsonobj) {
         _name = name;
         _jsonobj = jsonobj;
     }
     public string SaveDB() {
         int rows;
         string time = DateTime.Now.ToString();
         string source = ConfigurationManager.ConnectionStrings["EPInfoSys"].ConnectionString.ToString();
         string DBcommand =
             @"INSERT INTO [EPInfoSystem].[dbo].[JsonTable]
             ([表名]
             ,[时间]
            ,[类型]
            ,[内容])
      VALUES
            ('" + _name + "','" + time + "','json','" + _jsonobj + "')";
         SqlConnection conn = new SqlConnection(source);
         try {
             conn.Open();
             SqlCommand ads = new SqlCommand(DBcommand, conn);
             rows = ads.ExecuteNonQuery();

         }
         catch (Exception ex) {
             return (ex.Message);
         }
         finally {
             conn.Close();
         }
         return "数据库备份录入成功，影响" + rows.ToString();
     }

 }

类操作，很简单，不必多解释了。

先写这些，明天写一点关于C#的文件操作吧。