zoukankan      html  css  js  c++  java
  • JSON Jquery 显示列表信息

    在页面中使用jquery调用的方式如下

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jqueryGetOrdersbyajax.aspx.cs" Inherits="WebApplication1.jqueryGetOrdersbyajax" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>

    <html xmlns="http://www.w3.org/1999/xhtml%22>
    <head>
        <title>通过ashx读取json数据,并显示订单信息</title>
        <% = minjquery %>
        <script language="javascript" type="text/javascript">

            var pageIndex = 0;
            $(function() {
                $.ajax(
            {
                type: "get",
                dataType: "json",
                url: "getdata.ashx",
                data: "pageIndex=" + pagecount,
                complete: function() { $("#load").hide(); },
                success: function(msg) {
                    var data = msg.Orders;
                    $.each(data, function(i, n) {
                        var row = $("#template").clone();
                        row.find("#OrderID").text(n.OrderID);
                        row.find("#CustomerID").text(n.CustomerID);
                        row.find("#EmployeeID").text(n.EmployeeID);
                        row.find("#OrderDate").text(ChangeDate(n.OrderDate));
                        if (n.ShippedDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.ShippedDate));
                        row.find("#ShippedName").text(n.ShipName);
                        row.find("#ShippedAddress").text(n.ShipAddress);
                        row.find("#ShippedCity").text(n.ShipCity);
                        row.find("#more").html("<a href=OrderInfo.aspx?id=" + n.OrderID + ">&nbsp;More</a>");
                        row.attr("id", "ready"); //改变绑定好数据的行的id
                        row.appendTo("#datas"); //添加到模板的容器中
                    });
                }
            });
        });

        function ChangeDate(date) {
            return new Date(date);
        }

        </script>

    </head>
    <body>
    <asp:PlaceHolder Visible="false" runat="server">
    <script type="text/javascript" src="jquery-1.3.2-vsdoc.js"></script>
    </asp:PlaceHolder>
        <div>
            &nbsp;<div>
                <br />
                <input id="first" type="button" value="  <<  " /><input id="previous" type="button"
                    value="  <  " /><input id="next" type="button" value="  >  " /><input id="last" type="button"
                        value="  >>  " />
                &nbsp;<span id="pageinfo"></span>
                <table id="datas" border="1" cellspacing="0" style="border-collapse: collapse">
                    <tr>
                        <th>
                            订单ID</th>
                        <th>
                            客户ID</th>
                        <th>
                            雇员ID</th>
                        <th>
                            订购日期</th>
                        <th>
                            发货日期</th>
                        <th>
                            货主名称</th>
                        <th>
                            货主地址</th>
                        <th>
                            货主城市</th>
                        <th>
                            更多信息</th>
                    </tr>
                    <tr id="template">
                        <td id="OrderID">
                        </td>
                        <td id="CustomerID">
                        </td>
                        <td id="EmployeeID">
                        </td>
                        <td id="OrderDate">
                        </td>
                        <td id="ShippedDate">
                        </td>
                        <td id="ShippedName">
                        </td>
                        <td id="ShippedAddress">
                        </td>
                        <td id="ShippedCity">
                        </td>
                        <td id="more">
                        </td>
                    </tr>
                </table>
            </div>
            <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
                LOADING....
            </div>
            <input type="hidden" id="pagecount" />
        </div>
    </body>
    </html>

    image

    其官方的资料如下,请参考

    http://james.newtonking.com/projects/json-net.aspx

    The Json.NET library makes working with JavaScript and JSON formatted data in .NET simple. Quickly read and write JSON using the JsonReader and JsonWriter or serialize your .NET objects with a single method call using the JsonSerializer. 

    Json.NET CodePlex Project

    Json.NET Download

    Features

    • LINQ to JSON
    • Lightning fast JsonReader and JsonWriter
    • The JsonSerializer for quickly converting your .NET objects to JSON and back again
    • Json.NET can optionally produce well formatted, indented JSON for debugging or display
    • Attributes like JsonIgnore and JsonProperty can be added to a class to customize how a class is serialized
    • Ability to convert JSON to and from XML
    • Supports multiple platforms: .NET, Silverlight and the Compact Framework

    Example

    Product product = new Product();
    product.Name = "Apple";
    product.Expiry = new DateTime(2008, 12, 28);
    product.Price = 3.99M;
    product.Sizes = new string[] { "Small", "Medium", "Large" };
     
    string json = JsonConvert.SerializeObject(product);
    //{
    //  "Name": "Apple",
    //  "Expiry": new Date(1230422400000),
    //  "Price": 3.99,
    //  "Sizes": [
    //    "Small",
    //    "Medium",
    //    "Large"
    //  ]
    //}
     
    Product deserializedProduct = JsonConvert.DeserializeObject<Product>(json);

    Documentation

    Json.NET - Quick Starts & API Documentation

    History

    Json.NET grew out of projects I was working on in late 2005 involving JavaScript, AJAX and .NET. At the time there were no libraries for working with JavaScript in .NET so I began to grow my own.

    Starting out as a couple of static methods for escaping JavaScript strings, Json.NET evolved as features were added. To add support for reading JSON a major refactor was required and Json.NET will split into the three major classes it still uses today, JsonReader, JsonWriter and JsonSerializer.

    Json.NET was first released in June 2006. Since then Json.NET has been downloaded thousands of times by developers and is used in a number of major projects open source projects such as MonoRail, Castle Project's MVC web framework, and Mono, an open source implementation of the .NET framework.

  • 相关阅读:
    【华磊随笔】一个企业的内部讨论(含高层)“30岁IT人,产出代码还是产出思想”之我见。
    dotNetGrid 演示站点(new)争取做ASP.NET中最好的Ajax开源表格控件
    【华磊随笔】进一步的分析:开发者版本;你属于哪个版本的程序员?
    新增格式化单元格数据功能dotNetFlexGrid1.24,快速的设置您的表格数据的不同样式;现在开始扔掉你的Asp.net GridView吧。(更新FieldFormatorHandle参数)
    【华磊随笔】技术到底值不值钱,到底值多少钱有感于公司新产品的上线
    【华磊原创】某企业前两年的开发人员技术能力评估表(不分语言)相对比较全面也比较细
    【华磊原创】安装程序自动检测安装.Net Framework运行环境(使用InnoSetup)
    mainline.js主线
    JS中的“!!”
    读“周大师代码评审”有感
  • 原文地址:https://www.cnblogs.com/chencidi/p/1604755.html
Copyright © 2011-2022 走看看