Jquery Ajax 处理Json数据

最新推荐文章于 2022-08-21 18:08:18 发布
crazzy0727
最新推荐文章于 2022-08-21 18:08:18 发布
阅读量811
点赞数
分类专栏： ajax
ajax 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法

方法一:(微软有自带Ajax框架)

在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod])

    [WebMethod]
    public static string ABC(string ABC)
    {
        return ABC;
    }

好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类.

但都返回Json格式(Json轻量级比XML处理起来简单).看看前台是怎么解析这些数据的.

代码如下:

前台页面:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>无标题页</title>  
        <style type="text/css">  
         .hover  
            {  
                cursor: pointer; /*小手*/  
                background: #ffc; /*背景*/  
            }  
        </style>  
        <script type="text/javascript" src="js/jquery-1.3.2-vsdoc2.js"></script>  
         <script type="text/javascript">  
            //无参数调用  
            $(document).ready(function() {  
                $('#btn1').click(function() {  
                    $.ajax({  
                        type: "POST",   //访问WebService使用Post方式请求  
                        contentType: "application/json",   
                        url: "Default2.aspx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名  
                        data: "{}",  //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到         
                        dataType: 'json',   //WebService 会返回Json类型  
      
                        success: function(result) {     //回调函数，result，返回值  
                            alert(result.d);  
                        }  
                    });  
                });  
            });  
            //有参数调用  
            $(document).ready(function() {  
                $("#btn2").click(function() {  
                    $.ajax({  
                        type: "POST",  
                        contentType: "application/json",  
                        url: "Default2.aspx/GetWish",  
                        data: "{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}",  
                        dataType: 'json',  
                        success: function(result) {  
                            alert(result.d);  
                        }  
                    });  
                });  
            });           
            //返回集合（引用自网络，很说明问题）  
            $(document).ready(function() {  
                $("#btn3").click(function() {  
                    $.ajax({  
                        type: "POST",  
                        contentType: "application/json",  
                        url: "Default2.aspx/GetArray",  
                        data: "{i:10}",  
                        dataType: 'json',  
                        success: function(result) {  
                            $(result.d).each(function() {  
                                alert(this);  
                                $('#dictionary').append(this.toString() + " ");  
                                //alert(result.d.join(" | "));  
                            });  
                        }  
                    });  
                });  
            });  
            //返回复合类型  
            $(document).ready(function() {  
                $('#btn4').click(function() {  
                    $.ajax({  
                        type: "POST",  
                        contentType: "application/json",  
                        url: "Default2.aspx/GetClass",  
                        data: "{}",  
                        dataType: 'json',  
                        success: function(result) {  
                            $(result.d).each(function() {  
                                //alert(this);  
                                $('#dictionary').append(this['ID'] + " " + this['Value']);  
                                //alert(result.d.join(" | "));  
                            });  
      
                        }  
                    });  
                });  
            });  
        //Ajax 为用户提供反馈，他们两个方法可以添加给jQuery对象在Ajax前后回调  
            //但对与Ajax的监控，本身是全局性的  
            $(document).ready(function() {  
                $('#loading').ajaxStart(function() {  
                    $(this).show();  
                }).ajaxStop(function() {  
                    $(this).hide();  
                });  
            });  
            // 鼠标移入移出效果，多个元素的时候，可以使用“，”隔开  
            $(document).ready(function() {  
                $('btn').hover(function() {  
                    $(this).addClass('hover');  
                }, function() {  
                    $(this).removeClass('hover');  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <div>  
        <input type="button" id="btn1" value="HelloWorld"/>   
        <input type="button" id="btn2" value="传入参数"/>   
        <input type="button" id="btn3" value="返回集合"/>   
        <input type="button" id="btn4" value=" 返回复合类型"/>   
        </div>  
        <div id="dictionary">dictionary  
        </div>  
        </form>  
    </body>  
    </html>  


后台.cs文件


    using System;  
    using System.Collections;  
    using System.Collections.Generic;  
    using System.Configuration;  
    using System.Data;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Security;  
    using System.Web.UI;  
    using System.Web.UI.HtmlControls;  
    using System.Web.UI.WebControls;  
    using System.Web.UI.WebControls.WebParts;  
    using System.Web.Services;  
    public partial class Default2 : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
        }  
        [WebMethod]  
        public static string HelloWorld()  
        {  
            return "123--->456";  
        }  
        [WebMethod]  
        public static string ABC(string ABC)  
        {  
            return ABC;  
        }  
        [WebMethod]  
        public static string GetWish(string value1, string value2, string value3, int value4)  
        {  
            return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);  
        }  
        /// <summary>  
        /// 返回集合  
        /// </summary>  
        /// <param name="i"></param>  
        /// <returns></returns>  
        [WebMethod]  
        public static List<int> GetArray(int i)  
        {  
            List<int> list = new List<int>();  
            while (i >= 0)  
            {  
                list.Add(i--);  
            }  
            return list;  
        }  
        /// <summary>  
        /// 返回一个复合类型  
        /// </summary>  
        /// <returns></returns>  
        [WebMethod]  
        public static Class1 GetClass()  
        {  
            return new Class1 { ID = "1", Value = "牛年大吉" };  
        }  
        public class Class1  
        {  
            public string ID { get; set; }  
            public string Value { get; set; }  
        }  
    }  


利用Jquery让返回的各类数据(string、集合(List<>)、类)以Json数据格式返回,为什么要用到result.d

  这里我们顺带讲下Json

  Json简单讲就是Javascript对象或数组.

　Json形式一: javascript对象    { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }   

  Json形式二: javascript数组    [{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },

                                 { "firstName": "Jason", "lastName":"Hunterwang", "email": "bbbb"}]

  当然javascript 数组和对象可以互相嵌套.如形式一中的"Brett"可以换成一个Js数组或Js对象.那微软的Ajax返回的是哪种形式呢.是第一种.

  微软框架默认返回一个  { "d": "后台返回的数据" } 这里我们用以上示例中的测试到得比如  

  如上例的返回的是string类型的话Firefox调试如下 

当返回的是List<>类型的话FireFox调试如下

返回的数据也是放在Js对象中的d属性里面 所以说这就是为什么我们老是用result.d来取微软的框架返回的数据.

方法一不常用.一般用得多的还是方法二.

方法二:(建一个一般处理程序即.ashx文件)

用这种方法一般是我们要在ashx文件里手动写好返回的Json格式的数据返回给前台用

ashx 你可以配成Json格式一或Json格式二

Default.aspx页面Js代码如下

    $.ajax({  
    type: "POST",  
    url: "Handler.ashx",   
    dataType: "json",  
    success: function(data){  
    alert(data.name); //返回的为 Json格式一(Js对象)  
    /* 返回的为 Json格式二(Js对象) 
    $(data).each(function(i) { 
            alert(data[i].name); 
            }); 
     */  
    }  
    });    


Handler.ashx 代码如下


    <%@ WebHandler Language="C#" Class="Handler" %>  
      
    using System;  
    using System.Web;  
    using System.Collections;  
    using System.Collections.Generic;  
    using System.Web.Script.Serialization;  
      
    public class Handler : IHttpHandler {  
          
        public void ProcessRequest (HttpContext context) {  
            JavaScriptSerializer jss = new JavaScriptSerializer();  
            context.Response.ContentType = "text/plain";  
            // 返回的为Json格式一 Js对象  
             string data = "{\"name\":\"wang\",\"age\":25}";  
            // 返回的为Json格式二 Js数组  
             //string data = "[{\"name\":\"wang\",\"age\":25},{\"name\":\"zhang\",\"age\":22}]";    
            context.Response.Write(data);              
        }   
        public bool IsReusable {  
            get {  
                return false;  
            }  
        }  
      
    }  


以上基本上就第二种方法,可能有人不喜欢拼字符串.那有什么好办法呢?答案是有.微软对Json有很好的支持.

拿上例子说我们只要把Handler.ashx改一下就可以了

Handler.ashx 代码如下

    <%@ WebHandler Language="C#" Class="Handler" %>  
    using System;  
    using System.Web;  
    using System.Collections;  
    using System.Collections.Generic; // Dictionary<,> 键值对集合所需  
    using System.Web.Script.Serialization;  //JavaScriptSerializer 类所需  
    public class Handler : IHttpHandler {      
        public void ProcessRequest (HttpContext context) {  
            JavaScriptSerializer jss = new JavaScriptSerializer();  
            context.Response.ContentType = "text/plain";  
            Dictionary<string, string> drow = new Dictionary<string, string>();  
            drow.Add("name", "Wang");  
            drow.Add("age", "24");  
            context.Response.Write(jss.Serialize(drow));      
        }   
        public bool IsReusable {  
            get {  
                return false;  
            }  
        }  
    }  


ASP.Net中的JavaScriptSerializer为我们提供了很好的方法

jss.Serialize(drow) 是把drow的Dictionary<string, int> (键和值的集合)数据类型转换成Json数据格式

调试结果如下图 (上面例子是输出了一个键值多集合即一个Json形式一的Js对象)

如果要输出Json形式二(Js数组)呢? 我们也只要改动一部分就了

Handler.ashx 代码如下

    <%@ WebHandler Language="C#" Class="Handler" %>  
    using System;  
    using System.Web;  
    using System.Collections;  
    using System.Collections.Generic;  
    using System.Web.Script.Serialization;  
    public class Handler : IHttpHandler {      
        public void ProcessRequest (HttpContext context) {  
            JavaScriptSerializer jss = new JavaScriptSerializer();  
            context.Response.ContentType = "text/plain";  
            List<Dictionary<string, string>> _list = new List<Dictionary<string, string>>();  
            Dictionary<string, string> drow = new Dictionary<string, string>();  
            drow.Add("name", "Wang");  
            drow.Add("age", "24");  
            Dictionary<string, string> drow1 = new Dictionary<string, string>();  
            drow1.Add("name", "Zhang");  
            drow1.Add("age", "35");  
            _list.Add(drow);   
            _list.Add(drow1);     
            context.Response.Write(jss.Serialize(_list));                 
        }   
        public bool IsReusable {  
            get {  
                return false;  
            }  
        }  
    }  


调试结果如下图 (上面例子是输出了Json形式二的Js数组)

 讲到这里基本概念也讲得差不多了. 这里再讲一个够常碰到的例子就是如何把DataTabel转换成Json格式从而好让前台页面调用.

就是在Handler.ashx写上一个方法

    /// <summary>  
        /// DataTable转Json  
        /// </summary>  
        /// <param name="dtb"></param>  
        /// <returns></returns>  
        private string Dtb2Json(DataTable dtb)  
        {  
            JavaScriptSerializer jss = new JavaScriptSerializer();  
            ArrayList dic = new ArrayList();  
            foreach (DataRow row in dtb.Rows)  
            {  
                Dictionary<string, object> drow = new Dictionary<string, object>();  
                foreach (DataColumn col in dtb.Columns)  
                {  
                    drow.Add(col.ColumnName, row[col.ColumnName]);  
                }  
                dic.Add(drow);  
            }  
            return jss.Serialize(dic);  
        }  


其实也有把Json格式转换成DataTabel格式,方法如下

    /// <summary>  
        /// Json转DataTable  
        /// </summary>  
        /// <param name="json"></param>  
        /// <returns></returns>  
        private DataTable Json2Dtb(string json)  
        {  
            JavaScriptSerializer jss = new JavaScriptSerializer();  
            ArrayList dic = jss.Deserialize<ArrayList>(json);  
            DataTable dtb = new DataTable();  
      
            if (dic.Count > 0)  
            {  
                foreach (Dictionary<string, object> drow in dic)  
                {  
                    if (dtb.Columns.Count == 0)  
                    {  
                        foreach (string key in drow.Keys)  
                        {  
                            dtb.Columns.Add(key, drow[key].GetType());  
                        }  
                    }  
      
                    DataRow row = dtb.NewRow();  
                    foreach (string key in drow.Keys)  
                    {  
      
                        row[key] = drow[key];  
                    }  
                    dtb.Rows.Add(row);  
                }  
            }  
            return dtb;  
        }  


我们让返回的Json以表格的形式显示出来

那么前台页面JS如下

    $.ajax({  
    type: "POST",  
    url: "Handler.ashx",   
    dataType: "json",  
    success: function(data){  
      var table = $("<table border='1'></table>");  
      for (var i = 0; i < data.length; i++) {  
      o1 = data[i];  
      var row = $("<tr></tr>");  
      for (key in o1)  
      {  
         var td = $("<td></td>");  
         td.text(o1[key].toString());  
         td.appendTo(row);}  
         row.appendTo(table);  
       }  
       table.appendTo($("#back"));  
    }  
    });    


由上例子 再讲两个Js知识点

1. 之前我们取Json里面的数据如果是返回的是数组的话是用data[i].name也可表示为data[i]["name"]

2. 如果要访问Js对象的所有属性那么遍历Js对象.

    success: function(data){  
    $(data).each(function(i) {  
          for(key in this) // 遍历Js对象的所有属性  
            alert(data[i][key]);  
            //这里就不能换成 data[i].key 否则key成了属性而不是上面的key变量  
            });  
     }  


也有把前台Json数据传到后台后解析成DataTabel

这里我把DataTabel软成Json和Json转成DataTabel写成一个例子.下载地址如下