首页 > PHP资讯 > HTML5培训技术 > Jquery使用Ajax获取后台返回的Json数据后,页面处理

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

HTML5培训技术
        <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;        }    }}

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持21不支持0