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 onclick=go("+(iCurrPage - 1)+")>上一页</A><A onclick=go(" + (iCurrPage + 1) + ")> 1 下一页</A>";
}
else
{
sTemp += "<A onclick=go("+ (iCurrPage - 1)+")>上一页</A> 末页";
}
}
else
{
if (iCurrPage < iMaxPage)
{
sTemp += "首页 <A onclick=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>
<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 onclick=go("+(iCurrPage - 1)+")>上一页</A><A onclick=go(" + (iCurrPage + 1) + ")> 1 下一页</A>";
}
else
{
sTemp += "<A onclick=go("+ (iCurrPage - 1)+")>上一页</A> 末页";
}
}
else
{
if (iCurrPage < iMaxPage)
{
sTemp += "首页 <A onclick=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;
}
}
}
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文件查询需要的数据。（但这样数据的实时更新就不行了的）。
对要处理的数据更新是很快情况下建议选择第二种方法是很不错的。
