JQuery解析JSON封装的数据表

最新推荐文章于 2021-06-05 04:45:12 发布

ulark

最新推荐文章于 2021-06-05 04:45:12 发布

阅读量615

点赞数

分类专栏： js 文章标签： json jquery function button input javascript

本文链接：https://blog.csdn.net/ulark/article/details/5049751

版权

js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

通过AJAX异步减少网络内容传输，而JSON则可以把传输内容缩减到纯数据；然后利用jQuery内置的AJAX功能直接获得JSON格式的数据；在客户端直接绑定到数据控件里面，从而达到最优。

1. HTML页面
<!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>test2</title>
            <script language="javascript" type="text/javascript" src="js/jquery-latest.pack.js"></script>
            <script language="javascript" type="text/javascript" src="js/PageDate.js"></script>
      </head>
      <body>
            <div>
                  <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=" >> " />
                         <span id="pageinfo"></span>
                        <ul id="datas">
                              <li id="template">
                                    <span id="OrderID">
                                          订单ID
                                    </span>/
                                    <span id="CustomerID">
                                          客户ID
                                    </span>
                                    <span id="EmployeeID">
                                          雇员ID
                                    </span>/
                                    <span id="OrderDate">
                                          订购日期
                                    </span>/
                                    <span id="ShippedDate">
                                          发货日期
                                    </span>/
                                    <span id="ShippedName">
                                          货主名称
                                    </span>/
                                    <span id="ShippedAddress">
                                          货主地址
                                    </span>/
                                    <span id="ShippedCity">
                                          货主城市
                                    </span>/
                                    <span id="more">
                                          更多信息
                                    </span>
                              </li>
                        </ul>
                  </div>
                  <div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red">
                        LOADING....
                  </div>
                  <input type="hidden" id="pagecount" />
            </div>
      </body>
</html>
注：ID属性比较重要，用于数据绑定。

2. 使用jQuery编写AJAX请求文件
var pageIndex = 1
var pageCount = 0;

      $(function()
      {
            GetPageCount();//取得分页总数
            pageCount = parseInt($("#pagecount").val());//分页总数放到变量pageCount里
            $("#load").hide();//隐藏loading提示
            $("#template").hide();//隐藏模板
            ChangeState(0,1);//设置翻页按钮的初始状态

            bind();//绑定第一页的数据

            //第一页按钮click事件
            $("#first").click(function()
            {
                  pageIndex = 1;
                  ChangeState(0,1);
                  bind();
            });

            //上一页按钮click事件
            $("#previous").click(function()
            {
                  pageIndex -= 1;
                  ChangeState(-1,1);
                  if(pageIndex <= 1)
                  {
                        pageIndex = 1;
                        ChangeState(0,-1);
                  }
                  bind();
            });

            //下一页按钮click事件
            $("#next").click(function()
            {
                  pageIndex += 1;
                  ChangeState(1,-1);
                  if(pageIndex>=pageCount)
                  {
                        pageIndex = pageCount;
                        ChangeState(-1,0);
                  }
                  bind(pageIndex);
            });

            //最后一页按钮click事件
            $("#last").click(function()
            {
                  pageIndex = pageCount;
                  ChangeState(1,0);
                  bind(pageIndex);
            });
      });

      //AJAX方法取得数据并显示到页面上
      function bind()
      {
            $("[@id=ready]").remove();
            $("#load").show();
            $.ajax(
            {
                  type: "get",//使用get方法访问后台
                  dataType: "json",//返回json格式的数据
                  url: "Handler.ashx",//要访问的后台地址
                  data: "pageIndex=" + pageIndex,//要发送的数据
                  complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
                  success: function(msg)
                  {//msg为返回的数据，在这里做数据绑定
                        var data = msg.table;
                        $.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.RequiredDate !== undefined) row.find("#ShippedDate").text(ChangeDate(n.RequiredDate));
                              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 + "&pageindex="+pageIndex+"> More</a>");
                              row.attr("id","ready");//改变绑定好数据的行的id
                              row.appendTo("#datas");//添加到模板的容器中
                        });
                        $("[@id=ready]").show();
                        SetPageInfo();
                  }
            });
      }

      function ChangeDate(date)
      {
            return date.replace("-","/").replace("-","/");
      }

      //设置第几页/共几页的信息
      function SetPageInfo()
      {
            $("#pageinfo").html(pageIndex + "/" + pageCount);
      }

      //AJAX方法取得分页总数
      function GetPageCount()
      {
            $.ajax(
            {
                  type: "get",
                  dataType: "text",
                  url: "Handler.ashx",
                  data: "getPageCount=1",
                  async: false,
                  success: function(msg)
                  {
                        $("#pagecount").val(msg);
                  }
            });
      }

      //改变翻页按钮状态
      function ChangeState(state1,state2)
      {
            if(state1 == 1)
            {
                  document.getElementById("first").disabled = "";
                  document.getElementById("previous").disabled = "";
            }
            else if(state1 == 0)
            {
                  document.getElementById("first").disabled = "disabled";
                  document.getElementById("previous").disabled = "disabled";
            }
            if(state2 == 1)
            {
                  document.getElementById("next").disabled = "";
                  document.getElementById("last").disabled = "";
            }
            else if(state2 == 0)
            {
                  document.getElementById("next").disabled = "disabled";
                  document.getElementById("last").disabled = "disabled";
            }
      }