window.history.pushState与ajax实现无刷新更新页面url

ajax能无刷新更新数据,但是不能更新url

HTML5的新API: window.history.pushState, window.history.replaceState

用户操作history,点击前进后退按钮会触发popstate事件。

这些方法可以协同window.onpopstate事件一起工作。

改变url的demo

本页是foo.html,url改变成bar.html,内容却不变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <button onclick="changeUrl()">按钮</button>

        <script>
        function changeUrl() {
            var stateObj = {foo: ‘bar‘};
            window.history.pushState(stateObj, ‘page 2‘, ‘bar.html‘); // 这将让浏览器的地址栏显示http://mozilla.org/bar.html,但不会加载bar.html页面也不会检查bar.html是否存在。
        }

        </script>
    </body>
</html>
时间: 2024-10-25 06:40:29

window.history.pushState与ajax实现无刷新更新页面url的相关文章

使用ajax和history.pushState无刷新改变页面URL

表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 1.可以无刷新

使用Jquery的Ajax实现无刷新更新,修改,删除页面

原文:使用Jquery的Ajax实现无刷新更新,修改,删除页面 本文将向大家讲述一下最近工作的一些总结,主要包括了以下内容,注册界面以及详细信息界面的编辑.主要是介绍了AJAX技术,因为我觉得其他方面没什么好介绍的.首先是跟大家说一下Ajax的优点,假如你删除了一个页面的内容,你想当于点击了一个按钮,那么这个页面必然发生了回发事件,也就是说,你的页面必然被刷新了一次.以下是我从网上找来的一张Ajax的原理图,本人PS技术太差了,所以索性从网上找算了. 其实我个人对于Ajax技术的理解并没有上面图

使用ajax实现无刷新改变页面内容

如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="p_tg.aspx.cs" Inherits="p_tg" %> 2 3 <!DOCTYPE html> 4 5 <html> 6 <head&

8. H5 pushState/popstate + ajax开发无刷新页面

css *{ margin: 0; padding: 0; } .m-a{ float: left; width: 100px; } .m-a a{ display: block; height: 30px; line-height: 30px; text-align: center; border: 1px solid #000; } .m-a a.on{ background-color: #ccc; } .con{ float: left; width: 300px; height: 30

AjAX请求后台,无刷新更新页面

$(function () {        $('#按钮ID').click(function () { $.ajax({                url: '请求地址',                data: '传递参数',                datatype: 'text/plain',//请求类型                success: function (返回参数) {                    if (result == "1")

无刷新更新页面内容

方法一:隐藏域技术 方法二:ajax技术(新,nice!) PS:相对地,有刷新页面版本,即是在action中调用php或asp服务器端的脚本语言

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="周记[学校晚会篇]" /><meta name="description

HTML5之pushstate、popstate操作history,无刷新改变当前url

pushState方法 一.认识window.history window.history 表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过 history 对象提供对览器历史记录的访问能力.它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退. 1.历史记录的前进和后退 在历史记录中后退,可以这么做: 1 window.history.back(); 这就像用户点击浏览器的后退按钮一样. 类似的,你可以前进,就像

HTML5新api即pushState和replaceState实现无刷新修改url

1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器我回去时要给我保持神秘状态. 先上代码,再解释这两个api. var url=window.location.href; var length=url.length; newur=url+"****"; history.replaceState(null, "",new