zoukankan      html  css  js  c++  java

  • ajax 请求 对json传的处理 Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    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. } 
  • 相关阅读:
    linux软件安装方式
    docker 安装 jenkins touch: cannot touch ‘/var/jenkins_home/copy_reference_file.log’: Permission denied Can not write to /var/jenkins_home/copy_reference_file.log. Wrong volume permissions?
    [ERR] Node goodsleep.vip:6379 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
    Linux 常用命令 服务器间scp 用户 export 创建文件、软连接
    redis 安装 集群 主从 哨兵 docker
    WPF密码框中禁止复制、粘贴
    Application 统计在线人数
    【转义字符】HTML 字符实体&lt; &gt: &amp;等
    SQL语句统计每天的数据
    正则表达式计算代码数
  • 原文地址：https://www.cnblogs.com/gaogaoxingxing/p/6055040.html
Copyright © 2011-2022 走看看