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

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>  
  6.     <script type="text/javascript">  
  7.      $(function () {  
  8.          $.ajax({  
  9.              url: 'jsondata.ashx',  
  10.              type: 'GET',  
  11.              dataType: 'json',  
  12.              timeout: 1000,  
  13.              cache: false,  
  14.              beforeSend: LoadFunction, //加载执行方法    
  15.              error: erryFunction,  //错误执行方法    
  16.              success: succFunction //成功执行方法    
  17.          })  
  18.          function LoadFunction() {  
  19.              $("#list").html('加载中...');  
  20.          }  
  21.          function erryFunction() {  
  22.              alert("error");  
  23.          }  
  24.          function succFunction(tt) {  
  25.              $("#list").html('');  
  26.   
  27.              //eval将字符串转成对象数组  
  28.              //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };  
  29.              //json = eval(json);  
  30.              //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);  
  31.   
  32.              var json = eval(tt); //数组         
  33.              $.each(json, function (index, item) {  
  34.                  //循环获取数据    
  35.                  var name = json[index].Name;  
  36.                  var idnumber = json[index].IdNumber;  
  37.                  var sex = json[index].Sex;  
  38.                  $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");  
  39.              });  
  40.          }  
  41.      });  
  42.     </script>  
  43. </head>  
  44. <body>  
  45.     <ul id="list">  
  46.     </ul>  
  47. </body>  
  48. </html>  

[csharp] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <%@ WebHandler Language="C#" Class="jsondata" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5. using System.Web.Script.Serialization;  
  6. using System.IO;  
  7. using System.Text;  
  8. using System.Collections.Generic;  
  9. using Newtonsoft.Json;  
  10. using System.Data;  
  11.   
  12. public class jsondata : IHttpHandler {  
  13.   
  14.     public void ProcessRequest(HttpContext context)  
  15.     {  
  16.         context.Response.ContentType = "text/plain";  
  17.         string JsonStr = JsonConvert.SerializeObject(CreateDT());  
  18.         context.Response.Write(JsonStr);  
  19.         context.Response.End();  
  20.     }  
  21.  
  22.     #region 创建测试数据源  
  23.     //创建DataTable  
  24.     protected DataTable CreateDT()  
  25.     {  
  26.         DataTable tblDatas = new DataTable("Datas");  
  27.         //序号列  
  28.         //tblDatas.Columns.Add("ID", Type.GetType("System.Int32"));  
  29.         //tblDatas.Columns[0].AutoIncrement = true;  
  30.         //tblDatas.Columns[0].AutoIncrementSeed = 1;  
  31.         //tblDatas.Columns[0].AutoIncrementStep = 1;  
  32.         //数据列  
  33.         tblDatas.Columns.Add("IdNumber", Type.GetType("System.String"));  
  34.         tblDatas.Columns.Add("Name", Type.GetType("System.String"));  
  35.         tblDatas.Columns.Add("BirthDate", Type.GetType("System.String"));  
  36.         tblDatas.Columns.Add("Sex", Type.GetType("System.String"));  
  37.         tblDatas.Columns.Add("Wage", Type.GetType("System.Decimal"));  
  38.         tblDatas.Columns.Add("Bonus", Type.GetType("System.Decimal"));  
  39.         //统计列开始  
  40.         tblDatas.Columns.Add("NeedPay", Type.GetType("System.String"), "Wage+Bonus");  
  41.         //统计列结束  
  42.         tblDatas.Columns.Add("Address", Type.GetType("System.String"));  
  43.         tblDatas.Columns.Add("PostCode", Type.GetType("System.String"));  
  44.         //设置身份证号码为主键  
  45.         tblDatas.PrimaryKey = new DataColumn[] { tblDatas.Columns["IdNumber"] };  
  46.   
  47.         tblDatas.Rows.Add(new object[] { "43100000000000", "张三", "1982", "0", 3000, 1000, null, "深圳市", "518000" });  
  48.         tblDatas.Rows.Add(new object[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" });  
  49.         tblDatas.Rows.Add(new object[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" });  
  50.         tblDatas.Rows.Add(new object[] { "43100000000003", "赵六", "1985", "0", 5000, 1400, null, "深圳市", "518000" });  
  51.         tblDatas.Rows.Add(new object[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" });  
  52.         return tblDatas;  
  53.     }  
  54.     #endregion   
  55.   
  56.     public bool IsReusable  
  57.     {  
  58.         get  
  59.         {  
  60.             return false;  
  61.         }  
  62.     }  
  63. }  

[javascript] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <!--  
  2.         <script type="text/javascript">  
  3.         $(function () {  
  4.             $.ajax({  
  5.                 url: 'jsondata.ashx',  
  6.                 type: 'GET',  
  7.                 dataType: 'json',  
  8.                 timeout: 1000,  
  9.                 cache: false,  
  10.                 beforeSend: LoadFunction, //加载执行方法    
  11.                 error: erryFunction,  //错误执行方法    
  12.                 success: succFunction //成功执行方法    
  13.             })  
  14.             function LoadFunction() {  
  15.                 $("#list").html('加载中...');  
  16.             }  
  17.             function erryFunction() {  
  18.                 alert("error");  
  19.             }  
  20.             function succFunction(tt) {  
  21.                 $("#list").html('');  
  22.   
  23.                 //eval将字符串转成对象数组  
  24.                 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };  
  25.                 //json = eval(json);  
  26.                 //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);  
  27.   
  28.                 var json = eval(tt); //数组         
  29.                 $.each(json, function (index, item) {  
  30.                     //循环获取数据    
  31.                     var Key = json[index].key;  
  32.                     var Info = json[index].info;  
  33.                     //                 var idnumber = json[index].IdNumber;  
  34.                     //                 var sex = json[index].Sex;  
  35.                     $("#list").html($("#list").html() + "<br>" + Key + "----" + Info.name); //+ " - " + idnumber + " - " + sex + "<br/>");  
  36.                 });  
  37.             }  
  38.         });  
  39.     </script>  
  40. -->  

[csharp] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <%@ WebHandler Language="C#" Class="jsondata" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5. using System.Web.Script.Serialization;  
  6. using System.IO;  
  7. using System.Text;  
  8. using System.Collections;  
  9. using System.Collections.Generic;  
  10. using System.Data;  
  11.   
  12. public class jsondata : IHttpHandler {  
  13.   
  14.     public void ProcessRequest(HttpContext context)  
  15.     {  
  16.         context.Response.ContentType = "text/plain";  
  17.         context.Response.Cache.SetNoStore();  
  18.         string data = "[{\"key\":\"1\",\"info\":{\"name\":\"222\",\"age\":\"333\",\"sex\":\"444\"}},{\"key\":\"2\",\"info\":{\"name\":\"999\",\"age\":\"000\",\"sex\":\"111\"}}]";  
  19.         context.Response.Write(new JavaScriptSerializer().Serialize(data));  
  20.     }  
  21.   
  22.   
  23.     public bool IsReusable  
  24.     {  
  25.         get  
  26.         {  
  27.             return false;  
  28.         }  
  29.     }  
  30. }  

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2013.aspx.cs" Inherits="Test2013" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.    <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>    
  9.    <script type="text/javascript">  
  10.        function GetPara(o) {  
  11.            var sortid = $(o).val();  
  12.            $.ajax({  
  13.                url: 'GetPara.ashx?type=get&sortid=' + sortid,  
  14.                type: 'GET',  
  15.                dataType: 'json',  
  16.                timeout: 3000,  
  17.                cache: false,  
  18.                beforeSend: LoadFunction, //加载执行方法      
  19.                error: erryFunction,  //错误执行方法      
  20.                success: succFunction //成功执行方法      
  21.            })  
  22.            function LoadFunction() {  
  23.                $("#list").html('加载中...');  
  24.            }  
  25.            function erryFunction() {  
  26.                alert("error");  
  27.            }  
  28.            function succFunction(tt) {  
  29.                $("#list").html('');  
  30.                var json = eval(tt); //数组  
  31.                $.each(json, function (index, item) {  
  32.                    //循环获取数据      
  33.                    var Id = json[index].id;  
  34.                    var Name = json[index].name;  
  35.                    $("#list").html($("#list").html() + "<br>" + Name + "<input type='text' id='" + Id + "' /><br/>");  
  36.                });  
  37.            }  
  38.        };  
  39.   
  40.   
  41.        function SavePara() {  
  42.            var parameter = {};  
  43.            $("#list input:text").each(function () {  
  44.                var key = $(this).attr("id");  
  45.                var value = $(this).val();  
  46.                parameter[key] = value;  
  47.            });    
  48.   
  49.            $.ajax({  
  50.                url: 'GetPara.ashx?type=save',  
  51.                type: 'POST',  
  52.                dataType: 'json',  
  53.                data: parameter,  
  54.                timeout: 3000,  
  55.                cache: false,  
  56.                beforeSend: LoadFunction, //加载执行方法      
  57.                error: erryFunction,  //错误执行方法      
  58.                success: succFunction //成功执行方法      
  59.            })  
  60.            function LoadFunction() {  
  61.            }  
  62.            function erryFunction() {  
  63.            }  
  64.            function succFunction(tt) {  
  65.            }  
  66.        };  
  67.    </script>    
  68.   
  69. </head>  
  70. <body>  
  71.     <form id="form1" runat="server">  
  72.     <div>  
  73.         <asp:DropDownList ID="ddl1" runat="server" onchange="GetPara(this)">  
  74.         </asp:DropDownList>  
  75.         <ul id="list"></ul>  
  76.   
  77.         <input type="button" value="保存数据" onclick="SavePara()" />  
  78.     </div>  
  79.     </form>  
  80. </body>  
  81. </html>  

[csharp] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <%@ WebHandler Language="C#" Class="GetPara" %>  
  2.   
  3. using System;  
  4. using System.Web;  
  5. using System.Data;  
  6. using System.Collections.Generic;  
  7. using System.Web.Script.Serialization;    
  8.   
  9.   
  10. public class GetPara : IHttpHandler {      
  11.     public void ProcessRequest (HttpContext context) {  
  12.         context.Response.ContentType = "text/plain";  
  13.         string SortId = context.Request["sortid"];  
  14.         string Type = context.Request["type"];  
  15.         if (Type=="get")  
  16.         {  
  17.             if (!string.IsNullOrEmpty(SortId))  
  18.             {  
  19.                 DataTable dt = MSCL.SqlHelper.GetDataTable("select * from PR_PRODUCTPARAS where sortid='" + SortId + "' ");  
  20.                 List<Paras> list = new List<Paras>();  
  21.                 for (int i = 0; i < dt.Rows.Count; i++)  
  22.                 {  
  23.                     Paras a = new Paras();  
  24.                     a.id = dt.Rows[i]["PARAID"].ToString();  
  25.                     a.name = dt.Rows[i]["PARANAME"].ToString();  
  26.                     list.Add(a);  
  27.                 }  
  28.                 context.Response.Write(new JavaScriptSerializer().Serialize(list));  
  29.             }  
  30.         }  
  31.         else if (Type == "save")  
  32.         {  
  33.             //反序列化json   
  34.             System.IO.Stream stream = context.Request.InputStream;  
  35.             System.IO.StreamReader sr = new System.IO.StreamReader(stream, System.Text.Encoding.GetEncoding("UTF-8"));  
  36.             string sJson = sr.ReadToEnd();  
  37.             if (sJson.Contains("&"))  
  38.             {  
  39.                 string[] sArr = sJson.Split('&');  
  40.                 for (int i = 0; i < sArr.Length; i++)  
  41.                 {  
  42.                     string[] sArr1 = sArr[i].Split('=');  
  43.                     object id = sArr1[0];  
  44.                     object value = sArr1[1];  
  45.                 }  
  46.             }  
  47.         }  
  48.         else  
  49.         { }  
  50.     }  
  51.    
  52.     public bool IsReusable {  
  53.         get {  
  54.             return false;  
  55.         }  
  56.     }  
  57.   
  58.     public struct Paras  
  59.     {  
  60.         public string id;  
  61.         public string name;   
  62.     }  
  63. }  
posted @ 2016-08-05 11:25  wumengchao1234  阅读(316)  评论(0)  编辑  收藏  举报