上一节我们简单的介绍了一些JSON的基础,这一节我们来看一个JSON的简单应用,所写的内容都是从一些前辈那里copy过来的,只是希望给像我这样的新手提供给一点帮助哦!大虾们就不用看了哦……哈哈!开始吧……
我们将做一个从前台利用ajax调用一个后台方法,该方法返回的是一个JSON类型的字符串,然后我们在前台对该字符串进行处理,这里我们利用jquery提供的ajax方法,同样jquery中也提供了一个获取从后台返回的json字符串的方法,废话不多说,我们来看吧!
示例:
首先,我们建立一个JsonHelper.cs类,该类提供了两个方法,对于JSON的序列化和反序列化,类代码如下:
public class JsonHelper
{
/// <summary>
/// 序列化
/// </summary>
public static String Serialize<T>(T data)
{
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer =
new System.Runtime.Serialization.Json.DataContractJsonSerializer(data.GetType());
using (MemoryStream ms = new MemoryStream())
{
serializer.WriteObject(ms, data);
return Encoding.UTF8.GetString(ms.ToArray());
}
}
/// <summary>
/// 反序列化
/// </summary>
public static T Deserialize<T>(String jsonStr)
{
T obj = Activator.CreateInstance<T>();
using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(jsonStr)))
{
System.Runtime.Serialization.Json.DataContractJsonSerializer serializer =
new System.Runtime.Serialization.Json.DataContractJsonSerializer(obj.GetType());
return (T)serializer.ReadObject(ms);
}
}
}
我们再建一个提供前台调用的方法类,这里我利用一个一般处理文件,新建一个一般处理文件,命名为:JSONHandler.ashx,代码如下:
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class JSONHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<User> users = new List<User>();
users.Add(new User
{
UserId=1,
UserName="张三",
Birthday=DateTime.Parse("1987/1/1")
});
users.Add(new User
{
UserId=2,
UserName="李四",
Birthday=DateTime.Parse("1986/12/2")
});
users.Add(new User
{
UserId=3,
UserName="王五",
Birthday=DateTime.Parse("1980/8/4")
});
String json = JsonHelper.Serialize(users);
context.Response.Write(json); //输出生成的json字符串,返回给前台处理
}
public bool IsReusable
{
get
{
return false;
}
}
//[Serializable]这里不要加序列化这个属性,否则在前台获取时会不行
public class User
{
public int UserId { get; set; }
public String UserName { get; set; }
public DateTime Birthday { get; set; }
}
}
下面我们再建立一个前台的页面,在前台,我们首先利用jquery的ajax方法调用刚建立的一般处理文件返回json字符串进行处理:
<script src="../JS/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//利用ajax获取返回的json然后处理结果
$("#btnTwo").click(function(){
alert("开始");
$.ajax({
type:"POST",
contentType:"application/json;utf-8", //注意这里哦
url:"JSONHandler.ashx",
success:function(data){
var jsonsObj=eval_r('('+data+')'); //利用eval方法将返回的json字符串转换为对象
for(var i=0;i<jsonObj.length;i++)
{
alert("用户id:"+jsonObj[i].UserId+"用户名:"+jsonObj[i].UserName+"生日:"+jsonObj[i].Birthday);
}
}
});
});
});
</script>
另外,jquery中提供另外一个方法getJSON,可以更方便的处理上面的内容了,如下:
<script src="../JS/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btnShow").click(function(){
//利用jquery的getJSON方法获取从后台返回的json字符串
$.getJSON("JSONHandler.ashx",function(data){
$.each(data,function(i){
alert("用户id:"+data[i].UserId+"用户名:"+data[i].UserName+"生日:"+data[i].Birthday);
});
});
});
});
</script>
好了,就这么多了,赶快试试吧!哈哈……
本文介绍了一种使用JSON进行前后台数据交换的方法。通过创建一个处理文件JSONHandler.ashx来生成JSON字符串,然后利用jQuery的ajax方法及getJSON方法在前端解析并展示这些数据。

被折叠的 条评论
为什么被折叠?



