jquery跨域获取数据以及分页

今天做了一个jquery跨域获取josn数据的功能，同时对获取的数据进行分页。看代码：

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 > 无标题页 </ title >
     < script type = " text/javascript " src = " js/jquery.js " ></ script >
     < script type = " text/javascript " >
    var PageSize = 2 ; // 每页显示数量
        jQuery(function() {
            ShowPage( " 1 " );
        });
        jQuery(function(){
           jQuery.getJSON( " http://91jquery.com/GetData.ashx?jsoncallback=? " ,{hid: ' 1007 ' ,hName:escape( ' 艾希 ' ),p: ' 1 ' ,pagenum:PageSize},function(data) {

                var jnData = data[ ' d ' ]; // 获取数据
                var getdata1 = "" ;
                 // 展示查询出来的数据
                jQuery.each(jnData,function(i){
                getdata1 += " <a href='Skins.aspx?id= " + jnData[i].ID + " ' title= " + jnData[i].title1 + " target=\ " _blank\ " ><div class=\ " list2 padding_10 dsli1 sizcache = \ " 6\ " sizset = \ " 245\ " bindex = \ " 1\ " \ " ><img width=\ " 120 \ " height=\ " 120 \ " border=\ " 0 \ " src=\ " http: // lolpf.uuu9.com/skinImage/"+jnData[i].pic+"\"><p>"+jnData[i].title1+"<br /><em class=\"f_yel\">所属英雄：</em>"+jnData[i].hname+"<br /><em class=\"f_yel\">喜欢度：</em>"+jnData[i].score+"</p><span class=\"title8bg\"></span><span class=\"title8\">"+jnData[i].title+"</span></div></a>\n";
                 });
                  jQuery( " #we " ).html(getdata1);
                  Getpage(data[ ' count ' ], 1 );
            })
        })
         // 分页的样式展示
        function Getpage(count,page)
            {
                var recordCount = count; // 记录总数
                var PageIndex = page; // 当前页
                     if (PageIndex < 1 )
                    {
                        PageIndex = 1 ;
                    }
                    var pageCount = GetPageCount(count); // 总页数
                     if (PageIndex > pageCount && pageCount != 0 )
                    {
                        PageIndex = pageCount;
                    }

             var fengye = " 页次： " + PageIndex + " / " + pageCount + "   每页 " + PageSize + " 条     " + SetPage(pageCount,PageIndex) + "" ;

             jQuery( " #showp " ).html(fengye);

          }
     // 计算总页数
    function  GetPageCount(count) // 总页数
      {
          var pCount = count / PageSize;
           if (count % PageSize != 0 ) { pCount ++ ;}
           return pCount;
       }
     // 点击上一页、下一页是触发该函数
   function go(page)
    {
        var getdata2 = "" ;
        jQuery.getJSON( " http://91jquery.com/GetpfData.ashx?jsoncallback=? " ,{hid: ' 1007 ' ,hName:escape( ' 艾希 ' ),p:page,pagenum:PageSize},                function(data){
                var jnData = data[ ' d ' ];
                jQuery.each(jnData,function(i){
                getdata2 += " <a href='Skins.aspx?id= " + jnData[i].ID + " ' title= " + jnData[i].title1 + " target=\ " _blank\ " ><div class=\ " list2 padding_10 dsli1 sizcache = \ " 6\ " sizset = \ " 245\ " bindex = \ " 1\ " \ " ><img width=\ " 120 \ " height=\ " 120 \ " border=\ " 0 \ " src=\ " http: // lolpf.uuu9.com/skinImage/"+jnData[i].pic+"\"><p>"+jnData[i].title1+"<br /><em class=\"f_yel\">所属英雄：</em>"+jnData[i].hname+"<br /><em class=\"f_yel\">喜欢度：</em>"+jnData[i].score+"</p><span class=\"title8bg\"></span><span class=\"title8\">"+jnData[i].title+"</span></div></a>\n";
                 });
                 jQuery( " #we " ).html(getdata2);
                 Getpage(data[ ' count ' ],page);
            })

    }
    // 样式自定义
    function SetPage(iMaxPage,iCurrPage)
    {
         if (iCurrPage < 1 )
            iCurrPage = 1 ;
         if (iCurrPage > iMaxPage)
            iCurrPage = iMaxPage;
        var sTemp = "" ;
         if (iCurrPage > 1 )
        {
             if (iCurrPage < iMaxPage)
            {
                sTemp += " <A  οnclick=go( " + (iCurrPage - 1 ) + " )>上一页</A><A οnclick=go( " + (iCurrPage + 1 ) + " )>  1  下一页</A> " ;
            }
             else
            {
               sTemp += " <A οnclick=go( " + (iCurrPage - 1 ) + " )>上一页</A>  末页 " ;

            }
        }
         else
        {
             if (iCurrPage < iMaxPage)
            {
                sTemp += " 首页  <A οnclick=go( " + (iCurrPage + 1 ) + " )>  下一页</A> " ;
            }
             else
            {
                sTemp += " 首页    末页</A> " ;
            }

        }
         return (sTemp);
    }
     </ script >
</ head >
< body >
< div class = " w620 clearfix " id = " we " ></ div >
< div id = " showp " ></ div >
</ body >
</ html >

后台一般处理程序：

主要是把根据条件查询出来的语句构造成josn格式输出.

代码

<% @ WebHandler Language = " C# " Class = " GetpfData " %>

using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text;

public class GetpfData : IHttpHandler {

     public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = " text/plain " ;
         string hid = context.Request[ " hid " ].ToString();
         string hname = HttpUtility.UrlDecode(context.Request[ " hName " ].ToString());
         int num = Convert.ToInt32(context.Request[ " pagenum " ].ToString());
         int page = Convert.ToInt32(context.Request[ " p " ].ToString());

SqlParameter[] paremeter = {
                                   new SqlParameter( " @hid " ,SqlDbType.Int)
        };
        paremeter[ 0 ].Value = hid;
         int id   = ( int )SqlHelper.ExecuteScalar(CommandType.Text, " select ID from Hero where hid=@hid " ,paremeter);
         int count = ( int )SqlHelper.ExecuteScalar( " select count(*) from Skin where Name= " + id);//查询总记录数;
        //查询要显示的数据;
         string sql = " select top " + num + " * from Skin where Name= " + id + " and id not in(select top " + num * (page - 1 ) + " id from Skin where Name= " + id + " order by id desc) order by id desc " ;
        DataSet ds = SqlHelper.ExecuteDataset(sql);
         //构造json格式;
        StringBuilder sb = new StringBuilder();
        sb.Append( " [ " );
         for ( int i = 0 ; i < ds.Tables[ 0 ].Rows.Count; i ++ )
            {
              sb.Append( " { " );
              sb.AppendFormat( " 'ID':'{0}','title':'{1}','title1':'{2}','pic':'{3}','score':'{4}','hname':'{5}','page':'{6}' " , ds.Tables[ 0 ].Rows[i][ " id " ].ToString(), ds.Tables[ 0 ].Rows[i][ " SkinTitle " ].ToString().Length > 9 ? StringHelper.GetLeftStr(ds.Tables[ 0 ].Rows[i][ " SkinTitle " ].ToString(), 9 ) : ds.Tables[ 0 ].Rows[i][ " SkinTitle " ].ToString(), ds.Tables[ 0 ].Rows[i][ " SkinTitle " ].ToString(), ds.Tables[ 0 ].Rows[i][ " Skinpic " ].ToString(), ds.Tables[ 0 ].Rows[i][ " Score " ].ToString(), hname, page);
              sb.Append( " } " );
               if (i < ds.Tables[ 0 ].Rows.Count - 1 )
              {
                  sb.Append( " , " );
              }
            }
        sb.Append( " ] " );
         string data = sb.ToString();
         string callback = context.Request.QueryString[ " jsoncallback " ];
        data = " {d: " + data + " ,count: " + count + " } " ;
        context.Response.Write(callback + " ( " + data + " ) " );
        context.Response.End();
    }
     public bool IsReusable {
         get {
             return false ;
        }
    }

}

思路很简单，就是每次查询给后台传入要查询的差数，再把Response.Write（）出来的数据进行重新的展示。

这样做有很大问题的，如果访问量非常大的话，服务器会受不了的。解决方法：

1、加上缓存。

2、将要查询的json数据生成js文件，从js文件查询需要的数据。（但这样数据的实时更新就不行了的）。

对要处理的数据更新是很快情况下建议选择第二种方法是很不错的。

转载于:https://www.cnblogs.com/123clb/archive/2011/01/19/1939501.html

jquery跨域获取数据以及分页相关推荐

jQuery之ajax的跨域获取数据
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...
ajax跨域获取数据后处理,简单实现ajax获取跨域数据
本文实例为大家分享了ajax获取跨域数据的具体代码,供大家参考,具体内容如下 1.效果图 2.源码 function getData(keyword) { var url="https:// ...
jQuery中通过JSONP来跨域获取数据的三种方式
第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({dataType: 'jsonp',url: 'http://www.a.com/user?id=123',succe ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
Jquery跨域获得Json
这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值, 一般跨域用到的两个方法为:$.ajax 和$.get ...
使用JSONP，jQuery的ajax跨域获取json数据
网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...
JSONProxy - 获取跨域json数据工具
JSONProxy是一款很好的获取json数据的代理网站,"Enables cross-domain requests to any JSON API".当你苦于无法跨域获取jso ...
Jquery跨域请求php数据（jsonp）
Jquery跨域请求php数据我们一般用到ajax的时候是在同服务器下,一般情况下不会跨域,但有时候需要调用其他域名或ip下的数据的时候,遇到跨域请求数据的时候. 今天在工作中碰到javascrip ...
Firefox OS, 向jQuery中XMLHttpRequest构造函数中传参，实现跨域请求数据
为什么80%的码农都做不了架构师?>>> 将以下代码应用于ajax方法调用之前 $.ajaxSettings.xhr = function() {try {return new ...

jquery跨域获取数据以及分页

jquery跨域获取数据以及分页相关推荐

最新文章

热门文章