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="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": "[email protected]" };
             //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": "[email protected]" };
                //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 = "[{\"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="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>
<%@ 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>
<%@ 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 = sArr1[1];
                }
            }
        }
        else
        { }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

    public struct Paras
    {
        public string id;
        public string name;
    }
}
时间： 2024-10-24 06:14:44

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

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> <sc

ajax获取后台传递的json数据

最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据.在$.ajax方法中应该是如何来处理的,简单进行说明. 首先给出要传的json数据:[{"demoData":"This Is The JSON Data"}] 1,使用普通的aspx页面来处理 Js代码   $.ajax({ type: "post", url: "Default.a

Ajax获取代理返回的Json数据

 [背景] Ajax在开发过程中使用的很多,局部刷新.动态加载等功能,非常受到用户的青睐,它可以接收代码返回的xml.html.Json等格式,本人主要讲述返回Json格式. 下面的代码是判断用户输入的密码是否与当前密码一致. [参考代码] 1.Js代码: function CreateXMLHTTP() { // 创建AJAX请求对象,系统不考虑跨浏览器情况 var progids = ["Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0&

JS获取后台返回的JSON数据

问题:通过$.get从后台获取了一段json串{"id":"1","name":"ww"},然后要拿到这里面的id和name值 $.get(url,     function(data) {    alert("ID:" + data.id + "\nName:" + data.name);     }); 直接这样写的话,界面会alert提示undefined,所以应该是没能正确解析返

jquery序列化form表单使用ajax提交后处理返回的json数据

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串: ** 将一个字符串输出到浏览器 */    protected void writeJson(String json) {        PrintWriter pw = null;        try {            servletResponse.setContentType("text/plain;charset=UTF-8"

jquery $.ajax()获取服务器上的json数据

$.ajax({ url: 'http://127.0.0.1/work/open.json', success: function(data) { var ob = data; if (typeof(data) == 'string') { ob = stringtoObject(data); } }); var stringtoObject = function(json) { return eval("(" + json + ")"); } url为获取jso

前台如何处理后台返回的json数据

后台返回的json数据格式: { "state": true, "data": { "id": 0, "name": "testAjax"'"sex": null, "csny": null, "mz": null, "byxx": null, "sfzh": null, "yhtc":

关于eval()函数处理后台返回的json数据

对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval()中执行一次.这种方式也适合以普通javascipt方式获取json对象,以下举例说明: var dataObj=eval("("+data+")");//转换为json对象 为什么要 eval这里要添加 ("("+data+")")呢? 原因在于:eval本身的问题

当后台返回的json数据里有h5字符串该如何显示

有时候一些数据是需要动态显示,并且需要换行,但客户端并不知道这些数据该在哪里换行, 并按照后台编辑格式来显示,于是后台直接返回的后台编辑的h5字符串,但数据已经经过json 解析过了,再去通过专门解析h5的第三方去解析瞬间感觉头大,于是我去百度了一下如何显示 后台返回的h5字符串,有两个方法,一种是label的attributedText,还一种是webView. label的写法: NSAttributedString * attrStr = [[NSAttributedString allo