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

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

        分类：            WebAsp.netJqueryJsonAjax2013-12-09 11:382529人阅读评论(0)收藏举报
[html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <title></title> 
  5.     <scriptsrc="JS/jquery-1.8.0.min.js"type="text/javascript"></script> 
  6.     <scripttype="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.     <ulid="list"> 
  46.     </ul> 
  47. </body> 
  48. </html>  
<!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>
[csharp] view plaincopyprint?在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. publicclass jsondata : IHttpHandler { 
  13.  
  14.     publicvoid 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.     } 
  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(newobject[] { "43100000000000", "张三", "1982", "0", 3000, 1000, null, "深圳市", "518000" }); 
  48.         tblDatas.Rows.Add(newobject[] { "43100000000001", "李四", "1983", "1", 3500, 1200, null, "深圳市", "518000" }); 
  49.         tblDatas.Rows.Add(newobject[] { "43100000000002", "王五", "1984", "1", 4000, 1300, null, "深圳市", "518000" }); 
  50.         tblDatas.Rows.Add(newobject[] { "43100000000003", "赵六", "1985", "0", 5000, 1400, null, "深圳市", "518000" }); 
  51.         tblDatas.Rows.Add(newobject[] { "43100000000004", "牛七", "1986", "1", 6000, 1500, null, "深圳市", "518000" }); 
  52.         return tblDatas; 
  53.     } 
  54.     #endregion  
  55.  
  56.     publicbool IsReusable 
  57.     { 
  58.         get 
  59.         { 
  60.             returnfalse; 
  61.         } 
  62.     } 
  63. }  
<%@ 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;
        }
    }
}
[javascript] view plaincopyprint?在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. -->  
<!--
        <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>
-->
[csharp] view plaincopyprint?在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. publicclass jsondata : IHttpHandler { 
  13.  
  14.     publicvoid 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.     publicbool IsReusable 
  24.     { 
  25.         get 
  26.         { 
  27.             returnfalse; 
  28.         } 
  29.     } 
  30. }  
<%@ 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;
        }
    }
}
[html] view plaincopyprint?在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. <htmlxmlns="http://www.w3.org/1999/xhtml"> 
  6. <headrunat="server"> 
  7.     <title></title> 
  8.    <scriptsrc="JS/jquery-1.8.0.min.js"type="text/javascript"></script>   
  9.    <scripttype="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 + "<inputtype='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.     <formid="form1"runat="server"> 
  72.     <div> 
  73.         <asp:DropDownListID="ddl1"runat="server"onchange="GetPara(this)"> 
  74.         </asp:DropDownList> 
  75.         <ulid="list"></ul> 
  76.  
  77.         <inputtype="button"value="保存数据"onclick="SavePara()"/> 
  78.     </div> 
  79.     </form> 
  80. </body> 
  81. </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="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>
[csharp] view plaincopyprint?在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. publicclass GetPara : IHttpHandler {     
  11.     publicvoid 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.         elseif (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.     publicbool IsReusable { 
  53.         get { 
  54.             returnfalse; 
  55.         } 
  56.     } 
  57.  
  58.     publicstruct Paras 
  59.     { 
  60.         publicstring id; 
  61.         publicstring name;  
  62.     } 
  63. }
posted @ 2014-05-11 19:51  x_window  阅读(616)  评论(0)    收藏  举报