第一次做ajax,有一些基础问题不太明白。
1、我用search.php做好分页并带着分页导航返回ajax.php页面后,一点链接就跳转到search.php页去了,这就没有ajax的效果了啊。
2、分页应该是search页面做好给ajax页面,还是在ajax页面做分页呢?
3、如果在ajax页面做分页,那就就没办法知道一共多少页,最多就只能加个上一页、下一页按钮,这个用户体验也太差了吧?而search传过来的分页却可以包含很多信息,而且操作也很简单。First Previous 1 2 3 4 5 6 7 8 Next Last Total: 100
所以,这个问题的通行做法是什么呢?
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>jajx</title>
<a name="aaa">点我就可以通过ajax访问ajaxsearch.php页面的返回数据</a>
<div class="container">
</div>
<script>
$(document).ready(function(){
$("a[name='aaa']").click(function(){
ajaxRequest('aaa');
});
$("a[name='noaaa']").click(function(){
ajaxRequest('noaaa');
});
$("a[name='bbb']").click(function(){
ajaxRequest('bbb');
});
});
function ajaxRequest(param) {
console.log(param);
$.ajax({
type: "GET",
url: "ajaxsearch.php",
data: {param: param},
success: function(data){
$(".container").html(data);
}
});
}
$(document).on('click', '.pagination a', function(event){
event.preventDefault();
event.stopPropagation();
var href = $(this).attr('href');
var param = href.split("param=")[1].split("&")[0];
var page = href.split("page=")[1];
$.ajax({
url: "ajaxsearch.php",
type: "GET",
data: { limit: page,param:param },
success: function(data) {
$(".container").html(data);
}
});
return false;
});
</script>
现状如下:
1、已经可以读取ajaxsearch.php页面的时间,进container的div
2、分页数据也是来自于ajaxsearch.php,也可以带进container的div
3、读过来的分页导航是在一个pagination的div里面,详细代码见下面。
4、问题就是,只要点页码,就会跳转到ajaxsearch.php,怎么改都不行。
<div id="pagination">
<a href="ajaxsearch.php?param=aaa&page=1">First</a>
<span class="activea">1</span>
<a href="ajaxsearch.php?param=aaa&page=2">2</a>
<a href="ajaxsearch.php?param=aaa&page=3">3</a>
<a href="ajaxsearch.php?param=aaa&page=4">4</a>
<a href="ajaxsearch.php?param=aaa&page=5">5</a>
<a href="ajaxsearch.php?param=aaa&page=2">Next</a>
<a href="ajaxsearch.php?param=aaa&page=264">Last</a>
<span class="total">Total: 1317</span>
</div>
另外,分页是ajax页面显示,点击时如果实现了不跳转,是不是还需要通过ajax页面向php页面传递页码等参数啊?不然咋调下一页的数据呢?感觉好复杂啊。