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 + " &nbsp;&nbsp;每页 " + PageSize + " 条&nbsp;&nbsp;&nbsp;&nbsp; " + 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  onclick=go( " + (iCurrPage  -   1 ) + " )>上一页</A><A onclick=go( "   +  (iCurrPage  +   1 )  +   " )>&nbsp;&nbsp;1&nbsp;&nbsp;下一页</A> " ;           
            }
             else
            {
               sTemp  +=   " <A onclick=go( " +  (iCurrPage  -   1 ) + " )>上一页</A>&nbsp;&nbsp;末页 " ;
            
            }
        }
         else
        {
             if  (iCurrPage  <  iMaxPage)
            {
                sTemp  +=   " 首页&nbsp;&nbsp;<A onclick=go( " + (iCurrPage  +   1 ) + " )>&nbsp;&nbsp;下一页</A> " ;  
            }
             else
            {
                sTemp  +=   " 首页&nbsp;&nbsp;&nbsp;&nbsp;末页</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文件查询需要的数据。（但这样数据的实时更新就不行了的）。

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