html下拉列表局部页面改变,前端分页标记，url变化，页面局部刷新。

1.前端使用的ajax,通过后端提供的接口地址，拿到了数据，遍历显示在页面；

目前也实现了分页展示，不过，点击下一页也只是局部刷新，地址栏并没有发生变化。

2.问题：如果刷新了页面就直接回到了初始化页面，这样看起来不合理，应该是回到用户的浏览的页面。

3.怎样将我现在的url地址加上pages=value，拼接在地址栏上???

html代码如下：

搜&nbsp索

A

B

搜索结果共0&nbsp个产品

暂无符合条件的产品

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 += '

' + words[i].searchProfile+ '

';

$(".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 += '

' + words[i].searchProfile+ '

';

$(".list-ul").html(str);

$(".wrap-lists-middle").hide();

$(".wrap-lists p").show();//搜索结果提示

$(".search-init img").hide();

$("#pagination1").show();

}

}

}

})

}

}