如何将AJAX请求中的id、pageNumber变量传递给JS函数getReviews使用

云上老周

2026-9-26

问题解决说明

核心问题

你在点击事件中声明的id和pageNumber是局部变量，getReviews()函数的作用域无法直接访问这两个值
点击事件中重复发送了两次相同的AJAX请求，属于冗余逻辑
你设置了dataType: 'json'但直接把响应内容赋值给DOM的html属性，如果你后端返回的是评论HTML片段，这个配置会导致请求解析失败
原有HTML中的ul节点没有加paging类，和JS中绑定点击事件的选择器.paging li a不匹配，会导致点击事件不触发

修正后的代码

HTML部分

<body>
<!-- 给ul补充paging类，匹配JS选择器 -->
<ul class="paging">
    <li><a class='page-link is-active' data-id=".$prodId." data-link=".$counter.">$counter</a></li>
    <li><a class='page-link' href='$ver=$counter' data-id=".$prodId." data-link=".$counter.">$counter</a></li>
</ul>
 
<div id='display_reviews' class="col-md-7"></div>
</body>

JS部分

$(document).ready(function(){
    // 初始化调用，默认取当前激活的分页链接参数
    let activePage = $('.page-link.is-active');
    getReviews(activePage.data('id'), activePage.data('link'));
 
    $(document).on('click', '.paging li a', function(e){
        e.preventDefault();
        // 切换分页激活样式
        $('.page-link').removeClass('is-active');
        $(this).addClass('is-active');
        // 直接传参调用请求方法，无需重复发请求
        getReviews($(this).data('id'), $(this).data('link'));
    });
 
    // 给函数添加两个入参接收商品id和页码
    function getReviews(id, pageNumber){
        $.ajax({
            type: 'GET',
            url: '/mysite/product/?action=getProductReviews&id='+id+'&page='+pageNumber,
            // 后端返回HTML片段就用html类型，返回JSON数据就改回json
            dataType: 'html',
            success: function(response){
                $('#display_reviews').html(response);
            }
        });
    };
});