pushState与ajax实现无刷新加载
一.JS代码:
$(document).ready(function() { getContent();//初始化页面 $("nav a").click(function() {
var href = $(this).attr("href");
history.pushState("", "", href);//ajax可前进后退
getContent();//执行ajax
return false;//阻止默认事件
});
}); var getContent = function() {
hash = window.location.hash;
if (hash == "#/") { load_page("Home"); } else
if (hash == "#/blog") { load_page("Blog"); } else
if (hash == "#/productos") {load_page("Productos"); }
} var load_page = function(inf){
$.ajax({
type: "GET",
url: "http://localhost:8080/test.php",
data: {page: inf},
cache: false,
success: function(result) {
$("#contenido").html(result);
}
});
} window.onpopstate = function(event) {//点击前进后退时执行
getContent();
};
二.html代码
<nav>
<a href="#/">Home</a>
<a href="#/blog">blog</a>
<a href="#/productos">productos</a>
</nav> <section id="contenido" role="main"> </section>
三.test.php
<?php echo $_GET['page']; ?>
pushState与ajax实现无刷新加载的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- jQuery Pjax – 页面无刷新加载,优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
- jquery完成界面无刷新加载登陆注册
昨天公司说官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成 贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击! ...
- asp.net mvc 无刷新加载
1.视图(index) <!--start--> <div data-am-widget="list_news" class="am-list-news ...
- ajax实现下拉菜单无刷新加载更多
$(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; va ...
- jquery+ajax无刷新加载数据,新闻浏览更多
<script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...
随机推荐
- 【Json】关于json解析时异常org.json.JSONException: A JSONObject text must begin with '{' at character 1 of {的解决方法
遇到这种异常有几种情况: 1.JSON格式有问题,检查一下格式. 2.格式没问题,仍然报错,这个是因为你的json文件头里带有编码字符(如UTF-8等),读取字符串时json串是正常的,但是解析就有异 ...
- 为何Apache下.htaccess不起作用,Linux、Windows详解
可能出现下面这三种的错误可能性: 第一种:启用 rewrite 和 .htaccess 设置 rewrite设置:找到apache的配置文件httpd.conf文件,找到:#LoadModule re ...
- Vundle的安装
1.Vundle.vim 安装 https://github.com/VundleVim/Vundle.vim 2.插件安装https://github.com/yangyangwithgnu/use ...
- Effective C++ 33 避免遮掩继承而来的名称
首先介绍一个原则LSP(Liskov Substitution Principle),如果Class D以Public方式继承Class B,则所有B对象可以派上用场的任何地方,D对象一样可以派上用场 ...
- XHR——XMLHttpRquest对象
创建XMLHttpRequest对象 与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest ...
- iOS开发——高级篇——iPad开发、iPad开发中的modal
一.iPad简介 1.什么是iPad一款苹果公司于2010年发布的平板电脑定位介于苹果的智能手机iPhone和笔记本电脑产品之间跟iPhone一样,搭载的是iOS操作系统 2.iPhone和iPadi ...
- JS处理JSON和数组
数组操作: var unnorArray = []; for ( var i = 0; i < record.length; i++) { var item = {}; if (record[i ...
- 【Python基础学习五】列表,元祖,字典
1.列表(list) 列表是Python的一种内置数据类型,list是一种有序的集合,可以随时添加和删除其中的元素,就像动态数组一样.获取list中的元素用角标获取,角标可以使用正角标,也可以使用负角 ...
- linux git安装及配置(包括更新)
1.在终端运行命令 sudo apt-get install git 2.查看版本号 git --version (若不是最新可更新 自选) 更新提示: sudo add-apt-repositor ...
- html5 form表单常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...