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. } 
  • 相关阅读:
    Go学习(5):集合
    Go学习(4):数组和切片
    Go学习(3):分支循环
    Go学习(2):基本语法
    Go学习(1):简介和配置
    input输入框只能输入数字而且开头不能为零
    JS 显示周 几和 月 日
    IntelliJ Idea 跳出括号并且光标移到末尾的快捷键
    不可小视的String字符串
    PrintWriter中的write与println方法居然就是这些区别
  • 原文地址：https://www.cnblogs.com/gaogaoxingxing/p/6055040.html
Copyright © 2011-2022 走看看