iou3344 2023-01-27 00:10 采纳率: 84.1%
浏览 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 Simulink仿真报错,请问如何解决
  • ¥20 宝塔面板无法添加Node项目,一直处于正在添加脚本页面
  • ¥50 Dkeil5 CT107D单片机的程序编写
  • ¥30 Ubuntu20.04中PVN3D复现过程交叉编译问题
  • ¥15 模拟电路求复阻抗和传递函数,请各位拍照写一下解答过程
  • ¥60 不懂得怎么运行下载来的代码
  • ¥15 CST导出3D模型图为什么和软件显示不一样?
  • ¥15 加热反应炉PLC控制系统设计(相关搜索:梯形图)
  • ¥15 python 用Dorc包报错,我的写法和网上教的是一样的但是它显示无效参数,是什么问题
  • ¥15 经过滑动平均后的一维信号还原用什么结构好呢?