关于PAJAX、pushState、单页模式 2C

现在网上说的pushState+AJAX ,比如现在做一个管理页面,左边菜单、右边内容

 <div id="menu"></div>
<div id="main"></div>

点击左边菜单通过AJAX请求a.html得到HTML填充到右边,地址栏URL,history发生
变化了(这个a.html是不带menu菜单的),但是如果我直接访问a.html的话那menu不
就没了吗?
那是不是我要实现这个,就要做两个a.html ·一个带menu,一个不带menu?

通过pushState+ajax可以把第二个页面加载到内容区域``改变了url地址··,但是一
刷新就马上编程没有menu的页面了·

0

2个回答

不用做两个a.html,单页模式就是最后做成一个页面的,用户访问其他页面,都调到主页面上的,做个拦截

0

看了pajax
你还需要配置你的服务器来寻找pjax请求并发送回pjax具体内容。
的pjax Ajax请求发送一个x-pjax头所以在这个例子中(在大多数情况下)我们想只返回网页的内容没有任何要求任何布局与头。

这里所指应该就是有两个页面··一个带有menu,一个没带menu··
这样不是更麻烦了··

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
三张图区别多页和单页应用模式
关于单页应用和多页应用模式的区别,借助网友的三张图就可以说明。 图片来源:http://blog.csdn.net/u013291076/article/details/53667382
前后端分离、模板引擎与单页模式
随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,往往需要针对不同的终端开发定制的版本,为了提升开发效率,前后端分离的需要越来越被重视,后端负责业务/数据接口,前端负责展现、交互逻辑,同一份数据接口,可用于多个终端。 传统的前后端:   后端是跟数据库跟服务器打交道的,前端是跟浏览器打交道的。但似乎他们的职责在以前甚至于...
H5修改url之pushState()和页面下拉加载判断
1.pushState方法 HTML5无刷修改url function changeURL(){ var url = document.getElementById('url').value; document.title = 'url';
Vue-cli+webpack单页模式详解
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会“太折腾”。 一、文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容。 ├─build │ ├─build.
HTML5单页面全屏滚动特效
插件描述:全屏滚动代码简单,非常适合新手。 参考示例:http://www.jq22.com/jquery-info4270
十八、HTML5单页框架View.js介绍 - 视图选项
我们在上一章节中讲述了多视图协作时视图参数的使用方式,本文将就视图之间的参数传递问题做进一步的补充描述。 使用了视图参数的开发者会遇到的第一个问题,可能是: 视图参数在目标视图刷新后获取不到 是的,确实是这样。作为最灵活、支持类型最全面的传参方式,视图参数的传递是临时性的,一次性的,是在内存中发生的。这意味着: 视图刷新后,视图参数消失 视图参数只能批量设置。亦即,第二次视图进入传递的视图参...
10个奇特的 HTML5 单页网站
网页设计师努力寻找新的方式来展现内容。其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站。 下面是10个令人惊叹的单页 H​​TML5 的网站,涵盖了简约设计,简单导航和视差滚动的综合应用。 Every Last Drop Marty.com Oakley Airbrake MX Scr
多页和单页模式区别
多页和单页模式区别 webx5 单页模式打开方式:justep.shell.showpage(); 多页模式打开方式:window.loacation.href = require.tourl();  转载自:http://www.cnblogs.com/zw-shi/p/6006827.html
SAP单页面应用
额问问
在 Laravel 5 中集成 Pjax 实现无刷新加载页面的扩展包 —— Laravel Pjax
pushstate  +  ajax   =pajax 一个分页查询的插件 1、简介 Pjax 是一个 jQuery 插件,其作用是使用 ajax 来加速页面加载时间,工作原理是只从服务器获取指定 HTML 片段,然后客户端使用获取到的内容更新局部页面。 Laravel Pjax 扩展包将 Pjax 集成到 Laravel 中,实现原理是提供一个中间件,返回 Pjax 期
单页应用模式和多页应用模式
最近学习VUE,了解到 “Vue.js 提供了一个官方命令行工具,可用于快速搭建大型单页应用”  之前做过项目,改过项目,基本都是小部分单页,大部分多页的模式,也没有在这方面进行细致的学习,这次通过学习VUE进行了细致的区分与学习 部分来源于: https://www.zhihu.com/question/20792064 http://www.php.cn/js-tutorial-401...
pajax使用教程
https://my.oschina.net/Jakesoft/blog/517158 pajax库文件请到github下载,地址见文章底部。 需要先引入jquery,再引入pjax 步骤: 一、首先你的项目需要有两个页面,page1.html, page2.html,现在的需求是在page1.html点击一个超级链接跳转到page2.html的时候能直接更新网页内容而不需要重
使用Angular.JS和ASP.NET创建单页应用
周三(4月2日)的Build大会上,David Catuhe和Jon Galloway做了一个关于将AngularJS用于 (转)ASP.NET应用程序的演讲。他们为开发者提供了一种方式,可以快速构建流行的单页Web应用。 Angular是由Google创建并运营的开源项目。顾名思义,这是一个基于JavaScript的库,遵循模型-视图-控制器(MVC)设计模式。如Catuhe和Gal
第4章 ASP.NET的网页代码模型及生命周期
第4章  ASP.NET的网页代码模型及生命周期 从本章开始,就进入了ASP.NET应用程序开发的世界。在了解了C#的结构,以及面向对象的概念后,就可以从面向对象的思想开发ASP.NET应用程序。在ASP.NET中,能够使用面向对象的思想和软件开发中的一些思想,例如封装、派生、继承以及高级的设计模式等。本章首先介绍ASP.NET中最重要的概念---网页代码模型。 4.1  ASP.NET的网页
【pushstate】参数详解
pushSteate() 接受三个参数:state 对象, title (目前被忽略了),URL可选参数。下面是更详细的解释: state object -- state object 是将要关联到使用 pushState创建的一个新历史(history)记录的javascrpt 对象。 当用户转到一个新页面的时候,popstate 事件将被触发, 那么这个state对象就会通过 eve
趣图:用 Django 做了一个单页面应用
(给Python开发者加星标,提升Python技能) 用 Django 做了一个单页面应用↓↓↓往期趣图(点击下方图片可跳转阅读)关注「程序员的那些事」加星标,每天看趣图...
vue填坑之解决部分浏览器不支持pushState方法
前端使用vue-router做单页面路由并开启history模式时,会碰到一个问题:部分低版本的手机浏览器、部分app以及IE9浏览器由于不支持pushState方法,会导致页面加载不出来。 解决这个问题的思路是: 1. 当浏览器支持pushState方法时,开启history模式,不支持则开启hash模式 2. 对链接做判断,当跳转的链接与路由模式不匹配时,则跳转至正确的链接 3. ...
js 监听返回键 利用pushState
 我的开发工作主要是做移动端广告的页面,为了留住更多的用户,我们需要监听浏览器的返回键,在用户返回时,弹出弹窗来进一步提供选项来分流客户。(监听关闭键无法自定义弹窗)      使用的方法就是利用pushState(基于jq,改成原生不难,自己动手。。。。)。      先上代码 if (window.history &amp;amp;&amp;amp; window.history.pushState)...
HTML5的popstate、pushState、replaceState如何玩转浏览器历史记录
一、popstate用来做什么的? 简而言之就是HTML5新增的用来控制浏览器历史记录的api。 二、过去如何操纵浏览器历史记录? window.history对象,该对象上包含有length和state的两个值,在它的__proto__上继承有back、forward、go等几个功能函数 在popstate之前,我们可以利用back、forward、go对history进行后退和前进操作。 例...
Pjax的介绍及妙用
Pjax这个陌生的单词儿,也许你不曾接触过。但是身为前端的你不能不对Pjax有所了解,它也算是一种技术,一种算是前卫的新技术。通过下面的介绍,希望对代码有兴趣的你能对Pjax有所了解,也希望能对你有所帮助。
使用pushState()改变url而不刷新
编者注:这个pushState()是一个HTML5的新接口,你可能在一些科技博客如36kr上看到过,ajax加载新的文章,并且改变网址却不需要刷新页面,本站也用到了这个,当你在首页往下拉时,加载分页内容,网址也随着改变,有利于后退和增加用户体验。 HTML5 的 pushState+Ajax HTML5提供history接口,把URL以state的形式添加或者替换到浏览器中,其实现
chrome 浏览器 对于history.pushState支持问题
在andriond手机上面 chrome手机pushState方法后取不到state对象 解决方法是同时使用pushState和window.history.state赋值来解决
利用history.pushState实现前端路由
link1 link2 var view = document.getElementById('router-view'); function linkTo(link){ switch(link) { case 1: { window.history.pushState({a:1}, 'mylink1
利用pushState, popState和location.hash等方法自己实现一个小型路由
这篇文章主要是记录下HTML5中history提供的pushState, replaceStateAPI。最后通过这些API自己实现小型的路由。 关于window.history提供的API请参见Mozilla文档 其中history提供的pushState和replaceState2个API提供了操作浏览器历史栈的方法。 其中pushState: history.pus
一个简易版的新闻应用
需求:1. 分清楚双页模式和单页模式。让项目可以一套代码运行; 2. 单页模式下,有一个新闻列表,点击里面的新闻标题跳转到新闻详情页; 3. 双页模式下,左边是新闻列表,右边是新闻详情,点击左边的新闻列表,右边的新闻详情随之更新。
利用pushState开发无刷新页面修改url参数
因为想要实现 tab切换 添加参数和修改参数值,一开始的思路是: /* * url 目标url * arg 需要替换的参数名称 * arg_val 替换后的参数的值 * return url 参数替换后的url */ function changeURLArg(url,arg,arg_val){ var pattern=arg+'=([^...
document.readyState(iOS如何更好的判断网页加载完成)
readyState 属性可以返回当前加载的状态  以此来在UIWebView 代理中调用某些代码。readyState  是只读的  其包含五种状态:1.unintialized : 没有任何文件被加载2.loading  :加载进行中3. loaded  :  部分的文件已经 加载且进行解析 但对象模型未生效4.interactive: 结束渲染 用户...
history.pushState的实际使用笔记
history.pushState是HTML5的特殊,IE8+支持 意思是在不刷新浏览器的情况下给浏览器记录插入队列的意思. “插菊花“ 参考地址:https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState history.pushState(state, title, url);
jquery.pajx.js
ajax + pushState的jQuery封装
Ember.js 实战
Emberjs实战, 由浅入深带你进入EmberJS世界,实现JS前端的MVC架构以及单页模式应用
打印机打印模式简述
打印机的打印模式一般分为:普通字符/字打印模式、位图打印模式和页打印模式。普通字符/字打印模式需要有字库支持,在字库中通过字符或字内码(如:字符的ASCII编码、汉字的GBK编码、BIG5编码等)查询得到字符或者字的点阵序列,最后将点阵序列发送给打印头完成打印。位图打印模式是将所有打印内容看做图片,然后通过分析图片得到一行点阵数据,逐行完成整幅图片的打印。在位图打印模式中,每一行的数据被封为一包,
PJAX全局无刷新的设置方法~
先添加必要文件: &amp;lt;script src=&quot;http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script src=&quot;http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; 然后下面加...
vi风格pdf阅读器推荐:Zathura
介绍 Zathura是一款新的 PDF 查看器 ,它相当轻巧,界面简约(与 Apvlv 很相似),且可以定制(如按键绑定、默认窗口大小等 ),支持vim风格快捷键。除了 PDF 查看器所具有的一般功能之外,Zathura 还包括搜索、表单编辑、可点击链接、导出图像等其他功能。 快捷键 gg G j/k/h/l J/K 翻一页 Tab 打开/关闭index...
history.pushState() 给网站添加和修改浏览历史记录
假设一个使用场景: 后台管理系统项目,左右固定布局。左侧是通用布局,右侧页面是通过ajax切换的 当我们切换菜单后,想返回上一页,通常点击浏览器自带的回退。会发现回退的不是上一页,而是最开始打开这个项目的那一页。并且当我们刷新当前页面。也会自动回退到最初始的页面 原因:我们切换菜单的时候并没有跳转页面,只是用过ajax把我们想要的那也插在右侧DIV中。没有跳转页面就意味着浏览器没有存下历...
wex5 实战 单页模式下的多页面数据同步
在wex5官方教程中,关于多页模式与单页模式进行了对比。两者最大的区别在于:         1 web加载速度,单页模式快于多页模式         2  多页模式对加载机制进行了预加载,一次加载之后再次加载,就会加快。         但是,由于项目需要,多页模式无法满足我对全局变量的绑定属性的获取(大家看我全局可观察变量博文),所以对页面进行了全部重构,重构之后,web加载的响应速度大
history pushState 实现浏览器前进与后退
使用HTML5的pushState实现的页面前进与后退功能。
(HTML5)pushState/replaceState实现无刷新改变内容及地址栏
HTML5 history对象新方法pushState-replaceState   附件截图来自: http://www.coding123.net/article/20120810/html5-history-pushstate-replacestate-method.aspx http://wsqwxf.blog.163.com/blog/static/2406800620121...
angular4相同路由间的页面跳转
相同路由间的页面跳转,页面不刷新的问题 例: 切换单位之后路由仍为/home,但不同组织的首页配置不同(包括banner,公告等等),如果直接跳转/home的话,页面不会进行刷新而且参数(id)也不会发生任何变化; 方法一: this.router.navigate(['home',{id:value}]); //后面带个参数,页面就会刷新 此时,页面刷新了,有些原始数据已经渲染上去,...
【JavaScript】history新特性pushState、replaceState(添加和修改历史条目)
添加和修改历史条目 history新特性pushState、replaceState 具体的API:https://developer.mozilla.org/en-US/docs/Web/API/History_API 别人的理解:https://www.cnblogs.com/mickybg/p/6527552.html 自己的运用: &lt;script&gt; w...
利用pushState实现单页路由
由于history提供的pushState, replaceState可以改变url,同时保持浏览器不刷新,并且通过popstate监听浏览器历史记录的方式,完成一系列的异步动作。 &lt;body&gt; &lt;a data-href="/home"&gt;首页&lt;/a&gt; &lt;a data-href="/my"&gt...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 关于大数据培训 关于云计算