无刷新URL 更新

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5无刷修改url - 琼台博客</title>
        <script type="text/javascript">
            function changeURL(){
                var url = document.getElementById(‘url‘).value;
                window.history.pushState({},0,‘http://‘+window.location.host+‘/‘+url);
            }

        </script>
    </head>
    <body>
        <h1>html5无刷新改变url</h1>
        <div id="info" style="margin:30px 0;">
            页面真实地址:
            <span style="color:red;"><script type="text/javascript">document.write(window.location.href);</script></span>
        </div>
        <div>
        请输入要改变地URL字符串:<input id=‘url‘ type="text" />
        <button onclick="changeURL();">点击无刷改变url</button>
        </div>
        <div style="color:red;margin-top:30px;">请使用支持html5的浏览器访问</div>
        <div style="margin-top:30px;"><a href="http://www.qttc.net/201303292.html" target="_blank">《html5无刷新改变URL》</a> - 琼台博客</div>
    </body>

</html>

  http://www.qttc.net/201303292.html

时间: 2024-10-09 21:03:12

无刷新URL 更新的相关文章

Jquery无刷新实时更新表格数据

html代码: <table width="600" align="center">  <tr class="head">  <th>First</th><th>Last</th>  </tr>  <?php  $sql=mysql_query("select * from add_delete_record");  $i=1;  whi

使用AjaxPro实现无刷新更新数据

需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(JQuery等)动态更新web页面DOM对应的数值即可,而AjaxPro库恰恰具有使用Javascript语句获取后台方法返回的数据的功能,问题就这样迎刃而解,顿时感觉萌萌哒. 流程 整个过程如下图所示: 详细操作 首先下载AjaxPro库(点击此处下载AjaxPro库),下载后解压得到两个dll文件,如下所示: 其中AjaxPro.2.

ajax无刷新绘图技术总结

在最近的一份项目当中,我发现我需要一份很重要的功能,就是实现动态的无刷新的更新数据,数据的显示为报表形式,这样的话,在我一开始的思考当中,就产生了一个很大的难度了,首先,因为服务器绘图技术本身就有一点难度,而且利用ajax无刷新的形式进行绘图就更有难度了,所以就思考怎么去完成这个项目. 首先,我们第一次打开页面,如果数据是从服务器把数据从模板分配到视图页面的,这样显示了数据,然后就应该发送ajax请求,服务器接收到发送的数据,这里其实项目是不需要处理数据的,这里无关紧要,主要是返回数据,这里数据

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> <me

Html5无刷新修改Url

Html5无刷新修改Url,history pushState/replaceState (2014-03-01 01:11:20) 转载▼ 标签: it   一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通 过history对象提供对览器历史记录的访问能力.它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退. 1.历史记录的前进和后退 在历史记录中

学习aiax(javascript)--页面无刷新更新ajax更新时间

1.JSP代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

struts2+jquery 实现ajax无刷新更新数据

前几天为了实现一个struts 的 ajax无刷新更新数据的例子,发现网上资料很少,很多已经过时或者链接都失效了 不过整合他们的资料,加上自己的研究,终于实现了效果 要求:1.各个学院提交学生数据到服务器,要求ajax 无刷新更新数据, 2.服务器端返回"更新成功"的提示窗口: 3.之后,使用jquery 更新input输入框的value值,为实现jquery 打印页面局部数据做准备. 此处使用struts2的第二种方法,(修改struts 配置文件,增加ajax package 的方

HTML5实现无刷新修改URL

前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我尝试了俩种方式来修改url: window.location.href,拼接一个搜索的key值,点击搜索的同时,刷新了页面,url改变了,功能是实现了,可是bug来了...,搜索页面闪烁后才进入结果页,而结合不跳转页面就不会发生闪烁的情况,所以当页面刷新时,vue实例都会被重新加载. window.

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

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