频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
Jquery 使用Ajax获取后台返回的Json数据后,页面处理
2013-12-09 15:35:40         来源:深南大道  
收藏   我要投稿



    
    <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() + "
" + name + " - " + idnumber + " - " + sex + "
"); }); } }); </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.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;
        }
    }
}

点击复制链接 与好友分享!回本站首页
相关TAG标签 后台 页面 数据
上一篇:Extjs4中通过点击不同的按钮加载不同的tree
下一篇:JS输入框邮箱自动提示(带有demo和源码)
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站