前台插件的介绍
jquery.json 插件{jQuery插件}
主要方法:
$.toJSON(json对象): 将json对象转化为字符串
$.evalJSON(str): 将字符串转化为json对象
插件下载: jquery.json-2.3.min.js
后台工具的介绍
json.net
主要方法:
将对象转为json字符串:
User u = new User() { Id = 1000, Name = "小白", Age = 50 };
string returnStr=JsonConvert.SerializeObject(u);将json格式字符串转为对象:
User user = JsonConvert.DeserializeObject<User>(Request["data"]);
前台json的读取
方式jQuery:
jQuery.getJSON(url, [data], [callback]) 返回值:XMLHttpRequest
参数
urlString
发送请求地址。
data (可选)Map
待发送 Key/value 参数。
callback (可选)Function
载入成功时回调函数。
示例:
1. 两个参数
jQuery.getJSON("Json.aspx", function (json) { _json = json; $("#TextArea1").val(json); $("#Text1").val(json.Id); $("#Text2").val(json.Name); $("#Text3").val(json.Age); })2. 3个参数
jQuery.getJSON("SetJson.aspx", { data: $.toJSON(_json) }, function (json) { $("#Text4").val(json.Id); $("#Text5").val(json.Name); $("#Text6").val(json.Age); }){ data: $.toJSON(_json) } : 可以是字符串, 也可以是json数据
$.toJSON: 是 jquery.json 插件提供的方法, 将json对象转换为字符串
后台json的处理:
需要用到 Json.net
用户类:
public class User
{
private long id;
public long Id
{
get { return id; }
set { id = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private int age;
public int Age
{
get { return age; }
set { age = value; }
}
}将对象转为json字符串:
User u = new User() { Id = 1000, Name = "小白", Age = 50 };
string returnStr=JsonConvert.SerializeObject(u);将json格式字符串转为对象:
User user = JsonConvert.DeserializeObject<User>(Request["data"]);
整项目简单示例:
1. 主页面
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.json-2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var _json;
function GetServerJson()
{
jQuery.getJSON("Json.aspx", function (json) {
_json = json;
$("#Text1").val(json.Id);
$("#Text2").val(json.Name);
$("#Text3").val(json.Age);
})
}
function SetServerUser() {
_json.Id = $("#Text1").val();
_json.Name = $("#Text2").val();
_json.Age = $("#Text3").val();
jQuery.getJSON("SetJson.aspx", { data: $.toJSON(_json) }, function (json) {
$("#Text4").val(json.Id);
$("#Text5").val(json.Name);
$("#Text6").val(json.Age);
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="获取Json" onclick="GetServerJson()" />
</div>
<br />
id:<input id="Text1" type="text" />
名字:<input id="Text2" type="text" />
年龄:<input id="Text3" type="text" />
<input id="Button2" type="button" value="修改" onclick="SetServerUser()" />
</form>
<div>修改之后的值: <br />
id:<input id="Text4" type="text" />
名字:<input id="Text5" type="text" />
年龄:<input id="Text6" type="text" /></div>
</body>
点击"获取Json” 从Json.aspx 获取User对象
点击”修改”将第一行修改后的对象 传到SetJson.aspx中, 然后恢复对象接着返回恢复的对象 在页面第二行数据中显示
2. Json.aspx
protected void Page_Load(object sender, EventArgs e)
{
User u = new User() { Id = 1000, Name = "小白", Age = 50 };
returnStr=JsonConvert.SerializeObject(u);
}3. SetJson.aspx
protected void Page_Load(object sender, EventArgs e)
{
User user = JsonConvert.DeserializeObject<User>(Request["data"]);
returnStr = JsonConvert.SerializeObject(user);
}项目源码下载: Json.zip