我在商品详情 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 不熟 ,求教
分页代码重新绑定事件,然后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;//阻止连接跳转,这个是重点
})
});
}
你用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);
}
});
没有 看懂 额 ,
分页方法 就是查询方法 <%=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">←</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">→</span></a></span>
</div>