jquery load() 如何重复加载?

我在商品详情 commodityDetail.jsp 页面load 了评论的页面 reviewList.jsp
图片说明

js代码如下
是一个点击事件触发评论


    function setCommId(id){
        $("#reviewDiv").load("<%=basePath%>review/sixReviews",{
            "commodityId" :id 
        },function(){

                $(".btn_reviews>a:first-child").css("border-bottom", "2px solid #f5f5f5");
                $(".btn_detail>a:first-child").css("border-bottom", "1px solid transparent");
                $(".btn_shipping>a:first-child").css("border-bottom", "1px solid transparent");
                $(".btn_faqs>a:first-child").css("border-bottom", "1px solid transparent");
                $(".reviews_content").css("display", "block");
                $(".detail_content").css("display", "none");
                $(".shipping_content").css("display", "none");
                $(".faqs_content").css("display", "none");

        });

    }

但是 我评论里面还有翻页的功能 ,翻页就直接跳转后台转到 评论页面reviewList.jsp

,没在商品详情页面里面。这里怎么让他实现 局部刷新 来翻页呢?

我对jquery 不熟 ,求教

4个回答

分页代码重新绑定事件,然后load分页连接到你的容器里面


    function setCommId(id){
        $("#reviewDiv").load("<%=basePath%>review/sixReviews",{
            "commodityId" :id 
        },function(){

                $(".btn_reviews>a:first-child").css("border-bottom", "2px solid #f5f5f5");
                $(".btn_detail>a:first-child").css("border-bottom", "1px solid transparent");
                $(".btn_shipping>a:first-child").css("border-bottom", "1px solid transparent");
                $(".btn_faqs>a:first-child").css("border-bottom", "1px solid transparent");
                $(".reviews_content").css("display", "block");
                $(".detail_content").css("display", "none");
                $(".shipping_content").css("display", "none");
                $(".faqs_content").css("display", "none");

                                $('#reviewDiv').find('分页连接选择器').click(function(){
                                $("#reviewDiv").load(this.href);//加载a连接href的页面到容器里面,或者自己写其他代码来加载
                                return false;//阻止连接跳转,这个是重点
                                })

        });

    }
zb51500618
zb51500618 求教
4 年多之前 回复

你用iframe来引入你的评论就可以了。
这样不影响引入页面的逻辑。
就是有时候大小不好控制,但是都是可以计算和设置的。

如果有帮助,希望采纳

使用ajax请求返回数据,使用字符串拼接html,添加到这个元素下

 $.ajax({
        url: '${ctx}/hpp/ajaxSearch.html',
        data: 'searchKey=' + searchKey +'&page=' + page,
        type: 'post',
        dataType: 'json',
        cache: false,
        success: function(data) {
            if(true != data.success){
                msgShow(data.msg);
            }else {
                searchKeyList = data.msg;

                for(var int=0;int<searchKeyList.length;int++){
                    html+="<li class=\"ucrj-an ucrj-an-no search-r-item\">";
                    html+="<a href=\"${ctx}/hpp/gp.html?Id=aaa\">";
                    html+="</a>";
                html+="</li>";
                }   


                $("#aaul").append(html);

        error: function(xhr) {
            msgShow('交易出错。',true);
        }
    });
zb51500618
zb51500618 你这是在后台全部用html 拼接么? 那个太麻烦
4 年多之前 回复

没有 看懂 额 ,
分页方法 就是查询方法 <%=basePath%>review/sixReviews ,在这里面。 你说的分页代码 是指下面的这个吗?

 <div class="sign_alert_page" id="lastPage"  style="display: none;"  >
                        <span class="previous lf">
                            <a href="#" id="lastprevious"><span aria-hidden="true">&larr;</span>Previous</a>
                        </span>
                            <ul class="pagination">
                                <c:forEach begin="${lastpage.startPage }" end="${lastpage.endPage }" step="1" varStatus="state" > 

                                        <c:choose>
                                            <c:when test="${state.index==lastpage.currentPage}">
                                            <li class="active"><a  id="lastcurrent_page" href="#" onclick="lastgotoPage(${state.index})" >${lastpage.currentPage}</a></li>

                                            </c:when>
                                            <c:otherwise>

                                        <li><a href="#" onclick="lastgotoPage(${state.index})" >${ state.index }</a></li>
                                            </c:otherwise>
                                        </c:choose>
                                </c:forEach>
                            </ul>
                            <span class="next rt"><a href="#" class="text-center"  id="lastnext">Next <span
                                    aria-hidden="true">&rarr;</span></a></span>
                        </div>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐