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日

悬赏问题

  • ¥15 关于cpci总线的几个问题,有点迷糊
  • ¥15 乳腺癌数据集 相关矩阵 特征选择
  • ¥15 我的游戏账号被盗取,请问我该怎么做
  • ¥15 通关usb3.0.push文件,导致usb频繁断连
  • ¥15 有没有能解决微信公众号,只能实时拍照,没有选择相册上传功能,我不懂任何技术,,有没有给我发个软件就能搞定的方法
  • ¥15 Pythontxt文本可视化
  • ¥15 如何基于Ryu环境下使用scapy包进行数据包构造
  • ¥15 springboot国际化
  • ¥15 搭建QEMU环境运行OP-TEE出现错误
  • ¥15 Minifilter文件保护