html页面在f5刷新后把所有值清零,页面刷新列表内容不丢失
我写了一个搜索的功能,功能已经实现了
但是刷新的时候页面就变成
之前搜索的内容就没了,现在想刷新的时候还是之前搜索的内容,我是想弄个刷新事件,然后刷新的时候执行搜索的事件
,但是百度了下jq的刷新没什么好的方法,兼容性问题很大,所以是不是我的方法有问题
,还是有什么好的方法可以解决;
具体代码如下:
html:
搜 索
手机
终端
js:
$(".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 == "终端") {
var dataUrl = "/LuceneSearch/search/devicepages"
var ptype = 1;
$("#pagination1").html("");
} else if(sel_value == "手机") {
var dataUrl = "/LuceneSearch/search/phonepages"
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);
}
});
}
})
}
})
html页面在f5刷新后把所有值清零,页面刷新列表内容不丢失相关推荐
- java 反正多次重复提交_java web开发时防止刷新后的重复提交
在java web开发过程中大家经常都会遇到页面刷新后重复提交导致数据库数据重复的情况出现. 那么,如何避免重复提交数据的情况出现呢?如下代码,是在jsp中解决重复提交的一种方式. //此段代码用于防 ...
- vue刷新页面如何保证路由不变_vue 刷新之后 嵌套路由不变 重新渲染页面的方法...
vue 刷新之后 嵌套路由不变 重新渲染页面的方法 解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 ...
- html刷新某块区域,javascript如何实现局部刷新?
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 J ...
- 记一次奇怪的debug:Tomcat部署网站每一个页面第一次打开404刷新后才正常显示...
序 不久前毕设网站的第三版上线,然后我遇到了一个奇怪的bug: 访问页面的时候,第一次打开404,必须F5刷新后才能正常显示 简直迷 第一次尝试 最开始以为是浏览器缓存没有清理[思路大概是:浏览器发现 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 参考文章: (1)[vue]使用localStorage解决vuex在页面刷新后数据被清除的问题 (2)https:// ...
- 刷新后 页面 保持滚动条位置
如何使页面刷新后仍然保持滚动条位置,有几种方法: 1. MaintainScrollPositionOnPostBack 最好 在Page_Load 中加入 Page.MaintainScrollPo ...
- class h5 点击后样式变化_【php】JQuery怎么实现页面刷新后保留鼠标点击addclass的样式?...
刚开始是这个效果 鼠标点击之后变成了这个效果 要保证实现 a 标签点击链接一个新的网址 同时也要保证效果达到 我目前写的网站代码 可以下载 http://115.com/file/c2zlhblv 看 ...
- 利用html sessionStorge 来保存局部页面在刷新后回显,保留
转自:https://blog.csdn.net/u011085172/article/details/77320562 在一个页面里面,有个局部页面记录这当前session的任务记录,之前用的coo ...
- 百度云管家使用QQ第三方登录时提示“由于网络原因无法载入页面 请点击刷新后重试”
解决!百度云管家使用QQ第三方登录时提示"由于网络原因无法载入页面 请点击刷新后重试" 首先网络是没问题,怎么会出现这个奇怪问题, 上网找原因后,各种说法. 试了好几种说法. 其中 ...
最新文章
- MinIO分布式专题(第一章、一文教你搭建MinIO单机版)
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- python基础教程:函数作用域
- 编码(2)从字节理解Unicode(UTF8/UTF16)
- php数组实例,php常用数组函数实例小结
- python3 yum源_Redhat7.3更换CentOS7 yum源
- GreenOpenPaint简介
- c++ 宏 stdin 和 STDIN_FILENO 区别
- react native基础-(一)react和react native基础
- 启动多个SlickEdit实例
- 人生定位 读后感(1)
- 芯片数据手册下载网站推荐
- 记第一次阿里数据研发工程师面试
- 各抢票软件的优势,抢火车票成功率高的APP
- 独家专访丨刘江川:从“边缘”到“中心”,边缘计算科学家的创业之路
- 初识mapbox GL
- 圆弧与直线相切画法_机械制图常识:圆弧连接画法
- 为你推荐10款开发常用的代码编辑器
- 你见过的最全面的Python重点知识总结
- Eclipse+Pydev详细配置