如何实现AJAX获取数据的情况下改变地址却不刷新页面
2016-12-19 00:00
543 查看
AJAX 都会使用,但是有个问题就是,每次一刷新之前获取的数据就没有了。
为了解决这个问题可以通过URL获取参数配合AJAX无刷新获取内容;
比如 www.a.com 通过AJAX获取了一次内容:参数是b=10;
下次刷新的时又回到www.a.com 是没有参数的,我们就要把之前的参数加到URL 里面
生成www.a.com?b=10;
只是加上去很简单,具体例子在下面
以下是我在表单有参数的时候实现的替换,需要用到正则:
我还找来了某个大神写的根据参数替换的函数,理解需要一定正则能力;
直接使用函数就可以获取参数值,剩下的就是替换;
API 说明:history.replaceState(state, title, url)
state:与要跳转到的URL对应的状态信息。
title:可以不传
url:要跳转到的URL地址,不能跨域。
为了解决这个问题可以通过URL获取参数配合AJAX无刷新获取内容;
比如 www.a.com 通过AJAX获取了一次内容:参数是b=10;
下次刷新的时又回到www.a.com 是没有参数的,我们就要把之前的参数加到URL 里面
生成www.a.com?b=10;
只是加上去很简单,具体例子在下面
以下是我在表单有参数的时候实现的替换,需要用到正则:
var urlStr =location.href; urlStr=urlStr.replace(/b=[A-Za-z]*/,"b="+name); history.replaceState(null,null,urlStr);
我还找来了某个大神写的根据参数替换的函数,理解需要一定正则能力;
var GetQueryString = function (name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return (r[2]); return null; }
直接使用函数就可以获取参数值,剩下的就是替换;
API 说明:history.replaceState(state, title, url)
state:与要跳转到的URL对应的状态信息。
title:可以不传
url:要跳转到的URL地址,不能跨域。
相关文章推荐
- 基于对象的JavaScript实现无刷新页面发送和获取数据Ajax.js
- Ajax实现定时刷新,获取后台数据(实现技术ASP)
- Ajax实现定时刷新,获取后台数据(实现技术ASP)
- 掌握 Ajax,第 6 部分: 建立基于 DOM 的 Web 应用程序 在不刷新页面的情况下使用 DOM 改变网页界面
- Ajax实现定时刷新,获取后台数据(实现技术ASP)
- Demo:充分利用 Ajax 技术 来体现页面局部刷新 效果(获取天气预报情况)
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- Ajax的应用:用过Ajax来实现不刷新页面的情况下判断用户是否存在
- 如何在无刷新页面的情况下实现客户端回调实例(C#)—MSDN学习笔记
- 如何在无刷新页面的情况下实现客户端回调实例(C#)—MSDN学习笔记
- Ajax实现无刷新的获取数据并绑定到GridView,以及无刷新更新数据
- Ajax实现无刷新的获取数据并绑定到GridView,以及无刷新更新数据[转]
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- 《JavaWeb---利用JQuery实现页面无刷新动态改变页面数据》
- Yii:如何在CGridView列表控件使用了Ajax方式更新数据的情况下返回前一个页面
- 传统方式实现AJAX异步获取数据,局部刷新
- 如何实现添加多条信息到GridView中,而一次保存到数据库,不被页面刷新而丢失数据呢?
- 使用ajax实现无刷新改变页面内容和地址栏URL
- 使用ajax实现无刷新改变页面内容和地址栏URL
- JSF中使用f:ajax标签无刷新页面改变数据