首页 > 代码库 > Jquery 使用Ajax获取后台返回的Json数据后,页面处理

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

<!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=http://www.mamicode.com/"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 = http://www.mamicode.com/"[{\"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=http://www.mamicode.com/"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 = http://www.mamicode.com/$(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=http://www.mamicode.com/"保存数据" onclick="SavePara()" />    </div>    </form></body></html>
<%@ 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=http://www.mamicode.com/"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 = http://www.mamicode.com/$(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=http://www.mamicode.com/"保存数据" 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 = http://www.mamicode.com/sArr1[1];                }            }        }        else        { }    }     public bool IsReusable {        get {            return false;        }    }    public struct Paras    {        public string id;        public string name;     }}

 

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