开发日志系列：一个表单页面的呈现与提交（一）——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#的文件操作吧。