导航:首页 > 网站优化 > seoajax分页

seoajax分页

发布时间:2020-11-02 13:12:15

1、asp.net ajax分页

关於生成httprequest对象。
这段代码相信有用。
从bingo.js里抽出来的

var _httpRequest;
if (window.XMLHttpRequest){
_httpRequest = new XMLHttpRequest();
}else if (window.ActiveXObject) {
var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for(var n=0;n<MSXML.length;n++){
try {
_httpRequest=new ActiveXObject(MSXML[n]);
break;
}catch(e){}
}
}

2、jquery ajax分页插件 怎么写

包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便

<script type="text/javascript">
 var kpage;
 
 $(function () {
  tocount();
 });
 
 function tocount() {
  //初始化
  $.ajax({ url: "/Service/DBCount", type: "post", success: function (e) {
   kpage = $("#divPage").page({ dataCount: e, pageChange: topage });
  }
  });
 }
 
 function topage(i, s) {
  //数据查询
  $("#divInfo").html("加载中...");
  $.ajax({ url: "/Service/List", type: "post", data: { PageSize: s, PageIndex: i }, success: function (r) {
   $("#tList").html(r);
   $("#divInfo").html("");
  }, error: function () {
   $("#divInfo").html("加载失败...<a href='javascript:reload();'>重试</href>");
  }
  });
 }
 
 function reload() {
  kpage.reload();
 }
 
</script>

具体jquery.kun_page.js:

/*

---------------------------------
参数config:
 
dataCount:数据总数
 
pageSize:页数据条数
 
maxButton:页码按钮数目
  
showCustom:是否能手动输入页码 
 
pageChange:页变更事件
参数:(i,s,c)
i:pageIndex,当前页
s:pageSize,页数据条数
c:pageCount,总页数
 
*/
 
(function($){
 
$.fn.page = function (config) {
 
 if (this.length != 1) {
  throw "k_page:如有多个page请调用多次!";
 }
 
  
 var defaults = { dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null }
 config = $.extend(defaults, config);
 
 if (config.maxButton <= 1) config.maxButton = 2;
 if (config.pageSize < 1) config.pageSize = 1;
 //按钮数目需偶数
 if (config.maxButton % 2 != 0)
  config.maxButton++;
 
 var pageIndex = 1, pageCount, move_kf;
 
 //初始化页数
 function initcount() {
  pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1;
 }
 initcount();
 
 var prev = "<div class="k_p_prev">上一页</div>", next = "<div class="k_p_next">下一页</div>", pbody = $(""), pcustom = $("<span class="k_custom">到第  页 </span><div class="k_btn">确定</div>"), cl = "<div class="k_cl"></div>", pipt = $("<input class="k_ipt" type="text">");
 this.empty().addClass("kun_page").append(prev);
 pipt.keypress(function (e) {
  if (e.which == 13) {
   topage("确定");
   return false;
  }
 }).appendTo(pcustom.children());
 
 if (config.pageChange) {
  this.unbind("click").bind("click", function (e) {
   var _t = $(e.target);
   if (_t[0].tagName == "DIV" && _t[0].className != "kun_page") {
    topage(_t.text());
   }
  });
 }
 
 //跳转页码
 function topage(text) {
 
  switch (text) {
   case "上一页":
    if (pageIndex - 1 < 1) {
     return;
    }
    pageIndex--;
    move_kf = "sc_r";
    break;
   case "下一页":
    if (pageIndex + 1 > pageCount) {
     return;
    }
    pageIndex++;
    move_kf = "sc_l";
    break;
   case "确定":
 
    if (!/^d+$/.test(pipt.val())) {
     pipt.val("");
     return;
    }
    text = parseInt(pipt.val());
    if (text < 1 || text > pageCount) {
     pipt.val("");
     return;
    }
 
   default:
    var _pindex = parseInt(text);
    if (pageIndex == _pindex)
     return;
    move_kf = pageIndex < _pindex ? "sc_l" : "sc_r";
    pageIndex = _pindex;
    break;
  }
 
  gopageChange();
 }
 
 //页变更事件
 function gopageChange() {
  if (config.pageChange) {
   if (config.dataCount != 0) {
    config.pageChange(pageIndex, config.pageSize, pageCount);
    endloading();
   }
  }
 }
 
 //异步加载结束
 function endloading() {
  initpage();
 
 }
 
 //添加页码
 function initpage() {
  pbody.empty();
  var _t_maxb = config.maxButton / 2;
  //前后页码集合
  var _t_listp = [], _t_listn = [];
  var _min = 0, _max = pageCount;
 
  for (var i = 1; i <= _t_maxb; i++) {
   var _t_prev = pageIndex - i, _t_next = pageIndex + i;
   //当前页码之前的页
   if (_t_prev > 0) {
    _t_listp.push("<div class="k_p_page">" + _t_prev + "</div>");
    if (i == _t_maxb) _min = _t_prev;
   }
   //当前页码之后的页
   if (_t_next <= pageCount) {
    _t_listn.push("<div class="k_p_page">" + _t_next + "</div>");
    if (i == _t_maxb) _max = _t_next;
   }
  }
  //显示第一页
  if (_min > 1) pbody.append("<div class="k_p_page">1</div>");
  //显示前 ……
  if (_min - 1 > 1) pbody.append("<em>...</em>");
 
  for (var i = _t_listp.length; i >= 0; i--) {
   pbody.append(_t_listp[i]);
  }
 
  pbody.append("<div class="k_p_page k_p_current">" + pageIndex + "</div>");
 
  for (var i = 0; i < _t_listn.length; i++) {
   pbody.append(_t_listn[i]);
  }
 
  //显示后 ……
  if (pageCount - _max > 1) pbody.append("<em>...</em>");
 
  //显示最后一页
  if (_max < pageCount) pbody.append("<div class="k_p_page">" + pageCount + "</div>");
 
 }
 
 initpage();
 gopageChange();
 
 this.append(pbody).append(next);
 if (config.showCustom)
  this.append(pcustom);
 this.append(cl);
 
 return { reload: gopageChange, pageCount: pageCount, recount: function (e) {
  //重新计算页数
  config.dataCount = e;
  pageIndex = 1;
  initcount();
  initpage();
  gopageChange();
 }
 };
 
 //console.log(_min + "*" + _max + "*" + pageCount);
}
 
 
})(jQuery)

样式kun_page.css:

.kun_page {font-size: 12px;line-height:23px;font-family:"Microsoft YaHei";}
.kun_page .k_p_page{position:relative;}
.kun_page div {float: left;margin: 3px;border: solid 1px #ccc;cursor: pointer;color: #333;min-width:12px;text-align:center;padding:0px 5px;}
.kun_page em {display: block;float: left;margin: 2px;}
.kun_page .k_p_current {background: #ccc;color: #fff;-webkit-animation:scroll_b 300ms;animation:scroll_b 300ms;}
.kun_page .k_cl {clear: both;float: none;border: none;margin: 0px;padding: 0px;width:0px;height:0px;}
.kun_page .k_custom {display: block;float: left;margin: 3px 3px 3px 20px;}
.kun_page .k_ipt {width: 30px;height: 21px;border: solid 1px #ccc;text-align: center;vertical-align:middle;}
.kun_page .k_m{ opacity: 0; width: 1%; height: 1%;top:0px;left:0px; display:block; position: absolute; }
.kun_page .sc_l{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#CCCCCC), to(#645F5F));
 -webkit-transform:translate(-50px);-webkit-animation:scroll_k_l 300ms linear;
 background: -moz-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);
 background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);
 transform:translate(-50px);animation:scroll_k_l 300ms linear;
  
 }
.kun_page .sc_r{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#645F5F), to(#CCCCCC));
 -webkit-transform:translate(50px); -webkit-animation:scroll_k_r 300ms linear;
 background: -moz-linear-gradient(left, #645F5F 0%, #CCCCCC 100%);
 background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);
 transform:translate(50px); animation:scroll_k_r 300ms linear;
 }
 
/*
animation
*/
 
@-webkit-keyframes scroll_k_l{
0%{-webkit-transform:translate(-100px);opacity:0.2;width:200%;height:100%;}
99%{-webkit-transform:translate(-20px);opacity:0;width:200%;height:100%;}
100%{-webkit-transform:translate(-20px);opacity:0;width:1%;height:1%;}
}
 
@-webkit-keyframes scroll_k_r{
0%{-webkit-transform:translate(100px);opacity:0.2;width:200%;height:100%;}
99%{-webkit-transform:translate(20px);opacity:0;width:200%;height:100%;}
100%{-webkit-transform:translate(20px);opacity:0;width:1%;height:1%;}
}
 
@keyframes scroll_k_l{
0%{transform:translate(-100px);opacity:0.2;width:200%;height:100%;}
99%{transform:translate(-20px);opacity:0;width:200%;height:100%;}
100%{transform:translate(-20px);opacity:0;width:1%;height:1%;}
}
 
@keyframes scroll_k_r{
0%{transform:translate(100px);opacity:0.2;width:200%;height:100%;}
99%{transform:translate(20px);opacity:0;width:200%;height:100%;}
100%{transform:translate(20px);opacity:0;width:1%;height:1%;}
}
 
 
@-webkit-keyframes scroll_b{
0%,99%{background: #fff;color: #000;}

100%{background: #ccc;color: #fff;}
}
@keyframes scroll_b{
0%,99%{background: #fff;color: #000;}
100%{background: #ccc;color: #fff;}
}

样式和动画都可以自己修改(好吧,动画效果很朴素,闹哪样,明明想了很久好吗)

pageChange事件里面也没有过多的其他处理,比如我们公司前后台处理json就有一套方案,ajax提交的参数也有处理

所以若有需求,完全可以在我的代码上再封装一层

3、jquery ajax异步分页是什么意思

普通的分页都是通过程序输出一段链接地址,如

<a href="news.php?page=1">1</a>
<a href="news.php?page=2">2</a>
<a href="news.php?page=3">3</a>

这样 当你点击1,2,3链接页码的时候,会跳转到不同的数据页面,会有个跳转的过程

而ajax分页就是类似这样

<a onclick="jump(1)" href="javascript:void(0)">1</a>function jump(id) {
    $.post('news.php',{"id":id},function(data){
        //这里处理服务器返回的分页列表内容
    },'json');
}

过程就是用ajax向服务器请求资源,把资源再通过js改变到当前页面。好处就是,无刷新,页面不会跳转,整个网页资源不用重新加载,用户体验较好。

4、jsp如何做Ajax分页啊?

如果你要简单的话推荐你用ExtJs框架,这个Ajax框架使用简单而且界面元素丰富。下载ExtJs开发包,回里面包括答各种控件的使用例子,复制到你的项目然后稍作修改就行了,非常简单,这个地址可以下载: http://58.251.57.206/down?cid=&t=2&fmt=-遇到困难可以联系我,我写过不少Ext的例子。8015 8703

5、PHP如何实现ajax分页总结

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Ajax做分页</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="Ajax_pag.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> <style> .header{ margin-top: 20px; } </style> <body> <div style="margin-top: 20px; margin-top: 20px;"> 关键字: <input id="key" type="text" name="gjz"/> <input type="button" value="查询" id="ck" /> </div> <table class="table table-bordered header"> <thead> <tr> <th>地区代号</th> <th>地区名称</th> <th>父级代号</th> </tr> </thead> <tbody id="list"> </tbody> </table> <div style="margin:0 auto; width:500px;"> <ul class="pagination" id="fenye"> </ul> </div> </body></html>

6、java 使用ajax实现分页

用ajax分页,网络那么你的重点就不是Java了,
你需要掌握非常好的javascript,或者是js的类库(jquery,dojo)

后台的Java代码是内和平常的分页逻辑容是一样的
只是页面的代码不一样

以Jquery为例
假如这个是按下的连接

<a href="#" onclick="subpage(${xxx})">xxx</a>
//${}可以使EL表达式,或者是JSTL、OGNL,使用这个来动态确定分页的页码

function subpage(pagenum){
$.ajax({
url:"分页链接地址",
type:"POST",
data:"pagenum="+pagenum;
success:function(data){ //data是分页后的数据,推荐json形式
...这里是数据返回后对页面的响应代码
...也就是你页面的变动,在这个需要的是你的js功底来控制表格
...的变动,
}
});
}

7、如何通过ajax,html和php实现分页功能呢?

写法有很多种,比如:
html页面中:
<div id="shi"></div>
js:
$.get("1.php",{参数},function(data)
{
$("#shi").html(data);
});

即当点击上一页或下一页时触发一回个函数,执行上面的答代码,把返回的内容放在<div id="shi">这里</div>

data就是php 文件返回的内容;那个sql语句应该是这样写的吧:
select * from table order by id desc limit ($page-1)*每页个数,($page)*每页个数

这里用到了jquery.
其它还有一种思路,就是当第一次加载时,把所有的内容都从数据库里读出来了,然后在浏览器用js处理分页,在php发送数据时最好用json格式,这样更好处理

8、ajax 分页 思想

大致思路有两种

1.在客户端传递页码到服务端 服务端根据页码在数据库中取出相应的数据记录
生成datase或通过我前面一片日志里面推荐的使用LoadTemplate方法生成string返回给客户端
然后客户端更新html即可,这里需要分页的sql语句,对于access 我参考了博客园李洪根推荐的select top语句
详细见他的blog

2.对于小数据量的分页 如果你sql不熟 也可以将数据一次性读取到dataset
根据页码 计算当前页的记录编号 生成子dataset 返回同上的结果即可
这样做只涉及到简单的数学计算 利用datatable的rows.count很容易实现
附:datatable的复制
etc:
DataTable dt2=dt.Clone();
for(int i=0;i<dt.Rows.Count;i++)
{
dt2.ImportRow(dt.Rows[i]);
}

第二种方法稍微简单 只讨论第一种方法
需要注意的是 我们在客户端传递页码
那么我们必须在客户端生成相应的分页代码
js代码参考

strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
strHtml += '<span class="number">';
if (prevPage < 1) {
strHtml += '<span title="First Page">«</span>';
strHtml += '<span title="Prev Page">‹</span>';
} else {
strHtml += '<span title="First Page"><a href="javascript:loadpage(1)">«</a></span>';
strHtml += '<span title="Prev Page"><a href="javascript:loadpage('+prevPage+')">‹</a></span>';
}
if (this.page % 10 ==0) {
var startPage = this.page - 9;
} else {
var startPage = this.page - this.page % 10 + 1;
}
if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:loadpage('+ (startPage - 1) +')">...</a></span>';
for (var i = startPage; i < startPage + 10; i++) {
if (i > this.pageCount) break;
if (i == this.page) {
strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
} else {
strHtml += '<span title="Page ' + i + '"><a href="javascript:loadpage('+i+')">[' + i + ']</a></span>';
}
}
if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:loadpage('+(startPage + 10)+')">...</a></span>';
if (nextPage > this.pageCount) {
strHtml += '<span title="Next Page">›</span>';
strHtml += '<span title="Last Page">»</span>';
} else {
strHtml += '<span title="Next Page"><a href="javascript:loadpage('+nextPage+')">›</a></span>';
strHtml += '<span title="Last Page"><a href="javascript:loadpage('+this.pageCount+')">»</a></span>';
}
strHtml += '</span><br />';
break;

上面的代码是生成分页的核心代码 这样 通过自定义的loadpage(obj)事件[obj就是点击的页码]
我们可以利用ajax向服务端传递当前页码以获取返回结果
服务端首先需要的是一个Access的分页类 我自己写了一个

public class AccessPager
{
//internal member
private string table=string.Empty;
private int pagesize=10;
private int pageindex=1;
private string orderkey = string.Empty;
/// <summary>
/// contrustors
/// </summary>
/// <param name="tablename"></param>
/// <param name="curpage"></param>
/// <param name="size"></param>
public AccessPager(string tablename, int curpage, int size,string key)
{
table = tablename;
pagesize = size;
pageindex = curpage;
orderkey = key;
}
/// <summary>
/// get record count
/// </summary>
/// <returns></returns>
public int recCount()
{
string sql = "select count(*) from " + table;
return (int)AccessHelper.ExecuteScalar(System.Data.CommandType.Text, sql, null);
}
/// <summary>
/// get all page count
/// </summary>
/// <returns></returns>
public int pageCount()
{
if (recCount() % pagesize == 0)
return recCount() / pagesize;
else
return (recCount() / pagesize) + 1;
}
/// <summary>
/// get dataset
/// </summary>
/// <returns></returns>
public System.Data.DataSet ExecuteDataSet()
{
string sql = string.Empty;
if (pageCount() > 1)
{
if (pageindex == 1)
sql = "select top " + pagesize.ToString() + " * from " + table + " order by " + orderkey + " desc";
else if (pageindex < pageCount())
{
int endcount = pagesize * (pageindex-1);
sql = "select top " + pagesize.ToString() + " * from " + table + " where (" + orderkey + "<(select min(" + orderkey + ") from (select top "+endcount.ToString()+" "+orderkey+" from "+table+" order by "+orderkey+" desc) as t)) order by "+orderkey+" desc";
}
else if(pageindex>=pageCount())
{
if (recCount() % pagesize == 0)
{
sql = "select top " + pagesize.ToString() + " * from " + table + " order by " + orderkey + " desc";
}
else
{
int pLeft=recCount()%pagesize;
int endcount = pagesize * (pageindex - 1);
sql = "select top " +pLeft+ " * from " + table + " where (" + orderkey + "<(select min(" + orderkey + ") from (select top " + endcount.ToString() + " " + orderkey + " from " + table + " order by " + orderkey + " desc) as t)) order by " + orderkey + " desc";
}
}
}
else
sql = "select * from " + table+" order by "+orderkey+" desc";
return AccessHelper.ExecuteDataset(sql, System.Data.CommandType.Text, null);
}
}

这样就可以根据表名称 排序id(我这个类只针对有编号且编号为主键的情况)页码 每页大小取出dataset了

然后 在页面的ajax方法中 我们 首先 默认情况下载入第一页的数据

<div id="main">
<script language="javascript" type="text/javascript">
Blog_index.getData(1,2,_callback);
function _callback(res){
$('main').innerHTML=res.value; }
</script>
</div>
当点击js生成的分页控件上的页码时 触发以下事件

<script language="javascript" type="text/javascript">
function loadpage(obj){
$('main').innerHTML='<img src="../images/indicator.gif" alt="" />数据载入中......';
$('txtPageCount').value=obj;
var pg2 = new showPages('pg');
pg2.pageCount =<%=getCount(2)%>;
pg2.page= $('txtPageCount').value;
pg2.printHtml(1);
Blog_index.getData(obj,2,loadpage_callback);
}
function loadpage_callback(res){
$('main').innerHTML=res.value;
}
</script>

下面的是js生成分页控件的代码

<div id="page_container">
<div id="Pages"></div>
<input id="txtPageCount" type="text" style="display:none"/>
<script language="javascript" type="text/javascript">
var pg = new showPages('pg');
pg.pageCount =<%=getCount(2)%>;
pg.page=1;
pg.printHtml(1);
</script>
</div>

9、关于ajax无刷新分页

最好是没次翻页通过ajax来获取一个你设置的值域的数据,因为如果后台数据有上千条的话,你一次请求那么多数据,响应会很慢!
最好不要一次请求完。

10、通过ajax的方式能有效防止网页数据被采集吗

通过ajax能在一定程度上防止网页数据被采集。

要想弄明白其中的原因,首先要了解网页采集工具的工作原理,现在流行的网页采集工具绝大多数都是读取文档,从文档中采集信息。

说ajax在一定程度上可以防止网页数据被采集是因为ajax获取的数据一般是通过js生成标签,这种标签是不在文档中的,抓取工具自然就抓取不到这些数据。

ajax和js虽然利于用户体验,还能在一定程度上防止网页数据被采集,但是却不利于优化,因为搜索引擎爬取工具的工作原理跟网页抓取工具的原理是类似的,网页抓取工具抓取不到的内容,搜索引擎也抓取不到,这样就不利于网站的seo优化了。

一个网站要有自己的定位,商业型的网站要做seo优化提升搜索量,要尽量不去用ajax加载大量内容;系统型网站注重实用,可以多用ajax提升用户体验;内容原创性较高的网站也可以用ajax和js配合加载文档,防止内容被抓取。

与seoajax分页相关的知识