开发日志系列:一个表单页面的呈现与提交(一)——JSON的操作

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

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

上一篇:wpf、winform仿QQ靠边隐藏


下一篇:你好,博客园。僾硪,儞巼鰳嫲。