江苏龙网

  1. 首页 > 生活 > >

后台只返回JSON／JSON数组您们是咋做界面跳转，和URL改变的

可以在前端层面上也做一层路由，利用url中的hash部分，也就是#之后的部分，这个部分不会被服务器接收，但可以被js读取和修改。前端页面加载后读取这个部分的数据，根据url的模式做不同的页面跳转。此外，在页面跳转时，也更改hash，push历史，前端框架里基本都是这样的实现，你可以参考一下angularjs的路由部分。注: 我并没有亲自实现过这个路由机制，答案仅供参考。
■网友
大体上两种，分别是前台和后台。前台的话如上边所说，用angularJS一类的东西。后台则是http://ASP.Net里设置。共通点是结构上都要通过route/controller的方式。需要注意的是，纯粹通过URL进网页的话是不能保存当前state的，所以渲染当前页面需要的所有信息都必须放在URL里边。或者如果是后台的话，可以通过session cookie（不推荐）或者用户认证的方式取得当前状态。另外，后台返回JSON是服务层的设计，这个设计本身没有任何问题。但是展现层（UI）本身其实也是分前后台的。所以实际上跳转之类是在这里处理。
■网友
xxxxx/index.html---\u0026gt;xxxxx/index.html#content通过修改URL地址中的#符号之后的部分，不会触发当前页重新加载。非常适合重度依赖Ajax的Web应用。
■网友
其实对于web来说，无论是Single Page还是传统的web他们都需要 Route + Controller，不同时是一个放在浏览器中，一个放在服务器中（或者有个中间层node.js）对于浏览器Route机制来说可以看看下面的：Backbone.js 路由机制AngularJS路由和模板http://absurdjs.com/pages/api/build-in-components/#router通常URL传值，在?后附加以=连接的键值对，各键值对间以\u0026amp;连接；也可以通过URL传递页面参数，在”#”后附加的方式。两者最大的一个区别在于：后者不会发起请求，不会导致页面刷新。常见应用场景在于：不需要请求服务器，由浏览器端脚本直接定位到某个条件下的页面展示。如果需要根据URL的hash值变化，来进行不同的页面处理，需要一个监测方案。最常见的方法就是通过一个定时程序，不停的去检测url中hash的变化，一旦检测到变化，则触发操作但这个方案并不是实时触发的，而且究竟该多久检测一次，没有一个有依据的数值。如果数值过大，可能会影响到页面的快速呈现；如果数值过小，则会引起过高的资源占用。比较完美的一个方式是采用onhashchange的事件监测。hashchange事件在html5中有定义，在url的hash段变化的时候触发。目前支持onhashchange的浏览器有：
Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)IE 8WebKit 528+ (Safari/Google Chrome)Opera 10.70// 判断浏览器支持onhashchange事件if( (\u0026#39;onhashchange\u0026#39; in window) \u0026amp;\u0026amp; ((typeof document.documentMode===\u0026#39;undefined\u0026#39;) || document.documentMode==8)) { window.onhashchange = hashChangeFire; //对应新的hash执行的操作函数} else { // 不支持则用定时器检测的办法 setInterval(function() { var ischanged = isHashChanged(); //检测hash值或其中某一段是否更改的函数 if(ischanged) { hashChangeFire(); //对应新的hash执行的操作函数 } }, 150);}
■网友
【后台只返回JSON／JSON数组您们是咋做界面跳转，和URL改变的】 那是前后端分离模式，现在都很主流了，以前是后端保存请求路径，前端不是了，路径是前端自己保存的，可以去看看vue、react等，它们自带路由，而不像单体时代的，路径保存在后端了。而且路径保存在后端，性能相对而言也比较差，可能同样一个功能，需要向后端发送两次或更多次请求。

■网友
请参考任意一个MV*框架的具体实现。简单地说，你所看到的url一般都是定义在为route，然后根据不同的route来渲染layout和请求相应的数据。BackBone Tutorial


推荐阅读


上一篇：一个计算机专业的大三狗的迷茫。

下一篇：诺基亚到底输在了哪里