asp.net 利用jquery ajax 和json获取数据

 

1、服务器端把数据转换成json格式，把此类封装好共hander类调用。

View Code

using System;
using System.Collections.Generic;

using System.Web;
using System.Data;
using Newtonsoft.Json;
using System.Text;
using System.IO;

/// <summary>
///JsonHelper 的摘要说明
/// </summary>
public class JsonHelper
{
    public JsonHelper()
    {
        //
        //TODO: 在此处添加构造函数逻辑
        //
    }
    /// <summary>
    /// 把表格转换成json数据
    /// 通过表格名查找表格数组中的数据
    /// </summary>
    /// <param name="dt">表格</param>
    /// <param name="dtName">表格名称</param>
    /// <param name="count"></param>
    /// <param name="successAll"></param>
    /// <param name="amount"></param>
    /// <param name="balance"></param>
    /// <returns></returns>
    public static string DataTableToJSON(DataTable dt, string dtName)
    {
        StringBuilder sb = new StringBuilder();
        StringWriter sw = new StringWriter(sb);

        using (JsonWriter jw = new JsonTextWriter(sw))
        {
            JsonSerializer ser = new JsonSerializer();
            jw.WriteStartObject();
            jw.WritePropertyName(dtName);//表格名
            jw.WriteStartArray();//表格数组
            try
            {
                //通过循环输出表格中数据
                foreach (DataRow dr in dt.Rows)
                {
                    jw.WriteStartObject();

                    foreach (DataColumn dc in dt.Columns)
                    {
                        
                        if (dc.ColumnName == "Area_Code")
                        {
                            DataRow dr_areaName = Northwind.GetAreaName(dr[dc].ToString());
                            if (dr_areaName != null)
                            {
                                jw.WritePropertyName("Area_Name");
                                ser.Serialize(jw, dr_areaName["Area_Name"].ToString());
                            }
                        }
                        else
                        {
                            jw.WritePropertyName(dc.ColumnName);
                            ser.Serialize(jw, dr[dc].ToString());
                        }
                        
                        
                    }

                    jw.WriteEndObject();//结束输出
                }
                jw.WriteEndArray();//结束表格输出
                jw.WriteEndObject();//结束输出
            }
            catch (Exception ex)
            {
                string me = ex.Message;
            }

            sw.Close();//关闭流
            jw.Close();//关闭流

        }

        return sb.ToString();
    }
    /// <summary>
    /// 把字符窜转换成json数据
    /// </summary>
    /// <param name="var">属性值</param>
    /// <param name="Name">属性名称</param>
    /// <returns></returns>
    public static string ToJSON(string var, string Name)
    {
        StringBuilder sb = new StringBuilder();
        StringWriter sw=new StringWriter(sb);
        using(JsonWriter jw = new JsonTextWriter(sw))
        {
            JsonSerializer ser = new JsonSerializer();
            jw.WriteStartObject();
            jw.WritePropertyName(Name);
            ser.Serialize(jw,var);
            jw.WriteEndObject();
            sw.Close();
            jw.Close();
        }
        return sb.ToString();
        
        
    }
}

 

 2、客户端利用ajax 获取数据

View Code

<script type="text/javascript">

        var where = "";
        var orderby="";

        $().ready(function() {
            InitData(0, 0);
            
            $("#pageTheme").change(function() {
                $("#Pagination").attr('class', $(this).val());
            });

        });
        
        function pageselectCallback(page_id, jq) {
            InitData(page_id, where);
        }
        //pageindx要获取的页
        //m_where数据库查询条件
        function InitData(pageindx,m_where)
        {
            var tbody = "";
           var recordcount=0;
            if (m_where==0)
            {
                where = "<%=where%>";
            }
            else
            {
                where = m_where;
            }
            $.ajax({               
                type: "POST", //用POST方式传输
                dataType: "json", //数据格式:JSON
                url: 'Handler.ashx', //目标地址
                data: "p=" + (pageindx + 1) + "&orderby=" + orderby + where + "&recordcount=<%=pagecount%>&Client_ID=<%=Client_ID%>",
                beforeSend: function () { $("#divload").show(); $("#Pagination").hide(); }, //发送数据之前，显示“忙碌”图片，隐藏按钮
                complete: function () { $("#divload").hide(); $("#Pagination").show(); }, //接收数据完毕,隐藏“忙碌”图片，显示按钮
                error: function (XMLHttpRequest, textStatus, errorThrown) { },
                success: function (json) {
                    $("#productTable tr:gt(0)").remove();//删除表格原来的数据，保留表格头部信息
                    var status;
                    var productData = json.Products;//获取表格名，以便根据表格名获取表格中的数据

                    $.each(productData, function (i, n) {
                        var trs = "";
                        if (n.Is_Success == "2") {
                            status = "成功";
                        }
                        else if (n.Is_Success == "1" || n.Is_Success == "0") {
                            status = "处理中";
                        }
                        else {
                            status = "充值失败";
                        }
                        //下面把表格中的数据一条条添加到单元格中
                        trs += "<tr><td>" + (pageindx * 10 + (i + 1)) + "</td><td>" + n.id + "</td><td>" + n.Agent_OrderID + "</td><td>" + n.PhoneNum + "</td><td>" + n.Area_Name + "</td><td>" + n.Amount + "</td><td>" + status + "</td><td>" + n.Amount_Time + "</td></tr>";
                        
                        tbody += trs;//拼接
                    });

                    $("#productTable").append(tbody);//把数据添加到原表格中

                    $("#productTable tr:gt(0):odd").attr("class", "odd");//设置表格奇数行css
                    $("#productTable tr:gt(0):even").attr("class", "enen");//设置表格偶数行css


                    $("#productTable tr:gt(0)").hover(function () {//设置鼠标放置到表格行 和 离开表格行的css
                        $(this).addClass('mouseover');
                    }, function () {
                        $(this).removeClass('mouseover');
                    });
                    SQL(recordcount, pageindx);//分页
                }
            });

            SQL(0, pageindx); //分页

        }
        //分页插件
        function SQL(recordcount, pageindx) {
            $("#Pagination").pagination(recordcount, {
                callback: pageselectCallback,
                prev_text: '« 前页',
                next_text: '后页 »',
                items_per_page: 10,
                num_display_entries: 6,
                current_page: pageindx,
                num_edge_entries: 2
            });
        }
     </script>