Jquery 使用Ajax获取后台返回的Json数据后,页面处理

时间：2024-05-28 13:05:32
<!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>

    <title></title>

    <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

     $(function () {

         $.ajax({

             url: 'jsondata.ashx',

             type: 'GET',

             dataType: 'json',

             timeout: 1000,

             cache: false,

             beforeSend: LoadFunction, //加载执行方法

             error: erryFunction,  //错误执行方法

             success: succFunction //成功执行方法

         })

         function LoadFunction() {

             $("#list").html('加载中...');

         }

         function erryFunction() {

             alert("error");

         }

         function succFunction(tt) {

             $("#list").html('');

             //eval将字符串转成对象数组

             //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };

             //json = eval(json);

             //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

             var json = eval(tt); //数组

             $.each(json, function (index, item) {

                 //循环获取数据

                 var name = json[index].Name;

                 var idnumber = json[index].IdNumber;

                 var sex = json[index].Sex;

                 $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");

             });

         }

     });

    </script>

</head>

<body>

    <ul id="list">

    </ul>

</body>

</html>

<%@ WebHandler Language="C#" Class="jsondata" %>

using System;

using System.Web;

using System.Web.Script.Serialization;

using System.IO;

using System.Text;

using System.Collections.Generic;

using Newtonsoft.Json;

using System.Data;

public class jsondata : IHttpHandler {

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        string JsonStr = JsonConvert.SerializeObject(CreateDT());

        context.Response.Write(JsonStr);

        context.Response.End();

    }

    #region 创建测试数据源

    //创建DataTable

    protected DataTable CreateDT()

    {

        DataTable tblDatas = new DataTable("Datas");

        //序号列

        //tblDatas.Columns.Add("ID", Type.GetType("System.Int32"));

        //tblDatas.Columns[0].AutoIncrement = true;

        //tblDatas.Columns[0].AutoIncrementSeed = 1;

        //tblDatas.Columns[0].AutoIncrementStep = 1;

        //数据列

        tblDatas.Columns.Add("IdNumber", Type.GetType("System.String"));

        tblDatas.Columns.Add("Name", Type.GetType("System.String"));

        tblDatas.Columns.Add("BirthDate", Type.GetType("System.String"));

        tblDatas.Columns.Add("Sex", Type.GetType("System.String"));

        tblDatas.Columns.Add("Wage", Type.GetType("System.Decimal"));

        tblDatas.Columns.Add("Bonus", Type.GetType("System.Decimal"));

        //统计列开始

        tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus");

        //统计列结束

        tblDatas.Columns.Add("Address", Type.GetType("System.String"));

        tblDatas.Columns.Add("PostCode", Type.GetType("System.String"));

        //设置身份证号码为主键

        tblDatas.PrimaryKey = new DataColumn[] { tblDatas.Columns["IdNumber"] };

        tblDatas.Rows.Add(new object[] { "43100000000000", "张三", "1982", "0", 3000, 1000, null, "深圳市", "518000" });

        tblDatas.Rows.Add(new object[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" });

        tblDatas.Rows.Add(new object[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" });

        tblDatas.Rows.Add(new object[] { "43100000000003", "赵六", "1985", "0", 5000, 1400, null, "深圳市", "518000" });

        tblDatas.Rows.Add(new object[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" });

        return tblDatas;

    }

    #endregion 

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}
<!--

        <script type="text/javascript">

        $(function () {

            $.ajax({

                url: 'jsondata.ashx',

                type: 'GET',

                dataType: 'json',

                timeout: 1000,

                cache: false,

                beforeSend: LoadFunction, //加载执行方法

                error: erryFunction,  //错误执行方法

                success: succFunction //成功执行方法

            })

            function LoadFunction() {

                $("#list").html('加载中...');

            }

            function erryFunction() {

                alert("error");

            }

            function succFunction(tt) {

                $("#list").html('');

                //eval将字符串转成对象数组

                //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };

                //json = eval(json);

                //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);

                var json = eval(tt); //数组

                $.each(json, function (index, item) {

                    //循环获取数据

                    var Key = json[index].key;

                    var Info = json[index].info;

                    //                 var idnumber = json[index].IdNumber;

                    //                 var sex = json[index].Sex;

                    $("#list").html($("#list").html() + "<br>" + Key + "----" + Info.name); //+ " - " + idnumber + " - " + sex + "<br/>");

                });

            }

        });

    </script>

-->
<%@ WebHandler Language="C#" Class="jsondata" %>

using System;

using System.Web;

using System.Web.Script.Serialization;

using System.IO;

using System.Text;

using System.Collections;

using System.Collections.Generic;

using System.Data;

public class jsondata : IHttpHandler {

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        context.Response.Cache.SetNoStore();

        string data = "[{\"key\":\"1\",\"info\":{\"name\":\"222\",\"age\":\"333\",\"sex\":\"444\"}},{\"key\":\"2\",\"info\":{\"name\":\"999\",\"age\":\"000\",\"sex\":\"111\"}}]";

        context.Response.Write(new JavaScriptSerializer().Serialize(data));

    }

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2013.aspx.cs" Inherits="Test2013" %>

<!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>

   <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>

   <script type="text/javascript">

       function GetPara(o) {

           var sortid = $(o).val();

           $.ajax({

               url: 'GetPara.ashx?type=get&sortid=' + sortid,

               type: 'GET',

               dataType: 'json',

               timeout: 3000,

               cache: false,

               beforeSend: LoadFunction, //加载执行方法

               error: erryFunction,  //错误执行方法

               success: succFunction //成功执行方法

           })

           function LoadFunction() {

               $("#list").html('加载中...');

           }

           function erryFunction() {

               alert("error");

           }

           function succFunction(tt) {

               $("#list").html('');

               var json = eval(tt); //数组

               $.each(json, function (index, item) {

                   //循环获取数据

                   var Id = json[index].id;

                   var Name = json[index].name;

                   $("#list").html($("#list").html() + "<br>" + Name + "<input type='text' id='" + Id + "' /><br/>");

               });

           }

       };

       function SavePara() {

           var parameter = {};

           $("#list input:text").each(function () {

               var key = $(this).attr("id");

               var value = $(this).val();

               parameter[key] = value;

           });	

           $.ajax({

               url: 'GetPara.ashx?type=save',

               type: 'POST',

               dataType: 'json',

               data: parameter,

               timeout: 3000,

               cache: false,

               beforeSend: LoadFunction, //加载执行方法

               error: erryFunction,  //错误执行方法

               success: succFunction //成功执行方法

           })

           function LoadFunction() {

           }

           function erryFunction() {

           }

           function succFunction(tt) {

           }

       };

   </script>  

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)">

        </asp:DropDownList>

        <ul id="list"></ul>

        <input type="button" value="保存数据" onclick="SavePara()" />

    </div>

    </form>

</body>

</html>

<%@ WebHandler Language="C#" Class="GetPara" %>

using System;

using System.Web;

using System.Data;

using System.Collections.Generic;

using System.Web.Script.Serialization;  

public class GetPara : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";

        string SortId = context.Request["sortid"];

        string Type = context.Request["type"];

        if (Type=="get")

        {

            if (!string.IsNullOrEmpty(SortId))

            {

                DataTable dt = MSCL.SqlHelper.GetDataTable("select * from PR_PRODUCTPARAS where sortid='" + SortId + "' ");

                List<Paras> list = new List<Paras>();

                for (int i = 0; i < dt.Rows.Count; i++)

                {

                    Paras a = new Paras();

                    a.id = dt.Rows[i]["PARAID"].ToString();

                    a.name = dt.Rows[i]["PARANAME"].ToString();

                    list.Add(a);

                }

                context.Response.Write(new JavaScriptSerializer().Serialize(list));

            }

        }

        else if (Type == "save")

        {

            //反序列化json

            System.IO.Stream stream = context.Request.InputStream;

            System.IO.StreamReader sr = new System.IO.StreamReader(stream, System.Text.Encoding.GetEncoding("UTF-8"));

            string sJson = sr.ReadToEnd();

            if (sJson.Contains("&"))

            {

                string[] sArr = sJson.Split('&');

                for (int i = 0; i < sArr.Length; i++)

                {

                    string[] sArr1 = sArr[i].Split('=');

                    object id = sArr1[0];

                    object value = sArr1[1];

                }

            }

        }

        else

        { }

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

    public struct Paras

    {

        public string id;

        public string name;

    }

}

Jquery 使用Ajax获取后台返回的Json数据后,页面处理

相关文章