iou3344 2023-01-27 00:10 采纳率: 85.2%
浏览 23
已结题

似乎是ajax+php分页的初级问题

第一次做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&amp;page=1">First</a>
<span class="activea">1</span>
<a href="ajaxsearch.php?param=aaa&amp;page=2">2</a>
<a href="ajaxsearch.php?param=aaa&amp;page=3">3</a>
<a href="ajaxsearch.php?param=aaa&amp;page=4">4</a>
<a href="ajaxsearch.php?param=aaa&amp;page=5">5</a>
<a href="ajaxsearch.php?param=aaa&amp;page=2">Next</a>
<a href="ajaxsearch.php?param=aaa&amp;page=264">Last</a>
<span class="total">Total: 1317</span>
</div>

另外,分页是ajax页面显示,点击时如果实现了不跳转,是不是还需要通过ajax页面向php页面传递页码等参数啊?不然咋调下一页的数据呢?感觉好复杂啊。

  • 写回答

3条回答 默认 最新

  • 社区专家-Monster-XH 2023-01-27 01:17
    关注

    一些方法,回答不易,有用请你采纳!右边的采纳即可!
    1、解决跳转问题可以在链接上加上javascript:void(0)或者return false,这样点击链接后就不会跳转了。
    2、分页可以在search页面做好,然后通过ajax请求传递给ajax页面。这样的好处是search页面可以预先处理好分页信息并给ajax页面提供更好的用户体验。
    3、如果在ajax页面做分页,可以使用jQuery插件来实现,这样可以解决用户体验问题。
    所以通行做法是在search页面做好分页并通过ajax请求传递给ajax页面。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月4日
  • 已采纳回答 1月27日
  • 修改了问题 1月27日
  • 创建了问题 1月27日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改