极客观点
项目管理
HarmonyOS
1.前端使用的ajax,通过后端提供的接口地址，拿到了数据，遍历显示在页面；
目前也实现了分页展示，不过，点击下一页也只是局部刷新，地址栏并没有发生变化。
2.问题：如果刷新了页面就直接回到了初始化页面，这样看起来不合理，应该是回到用户的浏览的页面。
3.怎样将我现在的url地址加上pages=value，拼接在地址栏上???
html代码如下：
<body>
<form action="" method="get" id="myform">
<div>
<a class="close-btn" href="javascript:;"><img src="images/icon/close.png" alt="" /></a>
</div>
<div class="search-div search-div-en">
<input class="search-input" type="text">
<span class="search-sub">搜 索</span>
<select class="select-div">
<option class="option-btn1">A</option>
<option class="option-btn2">B</option>
</select>
</div>
</form>
<div class="wrap-lists">
<p class="search-p"><img src="images/icon/result.png">搜索结果共<span class="toatl">0 </span>个产品</p>
<ul class="list-ul"></ul>
</div>
<div class="wrap-lists-middle">
<img src="images/icon/UnsignedCondition.png" alt="">
<span>暂无符合条件的产品</span>
</div>
<div class="search-init">
<img src="images/icon/init.png" alt=""/>
</div>
<!--分页-->
<ul class="pagination" id="pagination1">
</ul>
</body>
js 代码
//中文界面
$(function(){
$(".search-sub").on('click',function(){
var value = $.trim($(".search-input").val());
var pageSize = 20;
var pageNum = 1;
//下拉选中的option值
var sel_value = $('.select-div option:selected').text(); //选中的文本
if(value == ""||value==null) {
$(".toatl").html("0"); //搜索结果为0
$(".list-ul").html(""); //列表置空
$(".wrap-lists-middle").hide(); //暂无图标
$(".search-init img").hide(); //初始化图标
$(".wrap-lists p").hide();//搜索提示
$("#pagination1").hide(); //分页隐藏
} else {
if(sel_value == "B") {
var dataUrl = "/LuceneSearch/searchB"
var ptype = 1;// $("#pagination1").html("");
} else if(sel_value == "A") {
var dataUrl = "/LuceneSearch/searchA"
var ptype = 0;
}
$.ajax({
url: dataUrl,
type: 'get',
data: {
keyword: value,
pageNum: pageNum,
pageSize: pageSize,
language:sel_value
},
dataType: 'json',
success: function(data) {
$(".toatl").html(data[0]["total"]); //搜索数
var pageTotal = Math.ceil(data[0]["total"] / pageSize);
var str = '';
var words = data[0]["result"]; //结果数
var value = $(".search-input").val(); //输入框值
if(words.length == undefined || words.length == 0) {
$(".toatl").html('0');
$(".list-ul").html("");
$(".wrap-lists-middle").show(); //暂无图标
$(".wrap-lists p").show();//搜索结果提示
$(".search-init img").hide();
$("#pagination1").hide();//分页隐藏
} else {
for(var i = 0; i < words.length; i++) {
var typestr = "http://products.chinamobiledevice.com/detailCN/" + words[i].searchUuid + "/" + ptype;
str += '<li><a href="' + typestr + '" target="_blank"><img src="' + words[i].searchDrawing + '" alt="暂无图片"/><p class="des-p" title="' + words[i].searchProfile+ '">' + words[i].searchProfile+ '</p></a><div class="border-ddd"></div></li>';
$(".list-ul").html(str);
$(".wrap-lists-middle").hide();
$(".wrap-lists p").show();//搜索结果提示
$(".search-init img").hide();
$("#pagination1").show();//分页显示
}
}
$.jqPaginator('#pagination1', {
totalPages: pageTotal,
visiblePages: pageTotal,
currentPage: 1,
onPageChange: function (num, type) {
aJax(num,20);
}
});
}
})
}
})
//分页逻辑
function aJax(num,rnNum){
var value = $.trim($(".search-input").val());
//下拉选中的option值
var sel_value = $('.select-div option:selected').text(); //选中的文本
if(value == ""||value==null) {
$(".toatl").html("0");
$(".list-ul").html("");
$(".wrap-lists-middle").hide(); //暂无匹配图标
$("#pagination1").hide(); //分页隐藏
$(".wrap-lists p").hide();//搜索结果提示
$(".search-init img").hide();
} else {
if(sel_value == "A") {
var dataUrl = "/LuceneSearch/searchA"
var ptype = 1;
} else if(sel_value == "B") {
var dataUrl = "/LuceneSearch/searchB"
var ptype = 0;
}
$.ajax({
url: dataUrl,
type: 'get',
data: {
keyword: value,
pageNum: num,
pageSize: rnNum,// pn:(num-1)*rnNum,
language:sel_value
},
dataType: 'json',
success: function(data) {
$(".toatl").html(data[0]["total"]); //搜索结果数
var str = '';
var words = data[0]["result"]; //结果数组
var value = $(".search-input").val(); //输入框值
if(words.length == undefined || words.length == 0) {
$(".toatl").html('0'); //无结果
$(".list-ul").html(""); //无列表
$(".wrap-lists-middle").show(); //暂无图标
$(".wrap-lists p").show();//搜索结果提示
$(".search-init img").hide();
$("#pagination1").hide();
} else {
for(var i = 0; i < words.length; i++) {
var typestr = "http://products.chinamobiledevice.com/detailCN/" + words[i].searchUuid + "/" + ptype;
str += '<li><a href="' + typestr + '" target="_blank"><img src="' + words[i].searchDrawing + '" alt="暂无图片"/><p class="des-p" title="' + words[i].searchProfile+ '">' + words[i].searchProfile+ '</p></a><div class="border-ddd"></div></li>';
$(".list-ul").html(str);
$(".wrap-lists-middle").hide();
$(".wrap-lists p").show();//搜索结果提示
$(".search-init img").hide();
$("#pagination1").show();
}
}
}
})
}
}
html5
用history.replaceState可以实现不刷新给路由添加参数