一种无刷新的url参数动态记录加载方法

一种无刷新的url参数动态记录加载方法
【技术领域】
[0001] 本发明设及前端开发技术领域，尤其是一种一种无刷新的U化参数动态记录加载 方法。
【背景技术】
[0002] 近几年软硬件和前端技术的发展，为满足用户良好的界面交互需求各种各样的W 前端为重屯、的富应用程序不断出现。运种富应用的特点是良好的交互响应，界面采用异步 的局部刷新的形式(仅仅更新用户操作的部分，其余的部分用户可W继续正常浏览，也就是 ajax技术），通常使用W javascript为重屯、的响应方式。
[0003] 很多的场景用户需要向其他的用户分享操作界面的界面，传统的方式是经过一系 列的操作之后对最终的操作结果进行截图分享给其他用户，其他用户从静态的图片中无法 获得富应用程序交互方式带给他的乐趣，并且他无法获取除了当前操作结果之外的其他信 息。
[0004] 因此，一种用户体现良好的直观的界面分享方法显得十分必要。

【发明内容】

[0005] 本发明解决的技术问题在于提供一种无刷新的抓L参数动态记录加载的方法;有 效解决上述的问题，提供一种用户体现良好的直观的界面分享方法。
[0006] 本发明解决上述技术问题的技术方案是：
[0007] 所述的方法是使用javascript编写监听程序，对关键的操作进行记录并将结果动 态记录在11化中，通过1〇。日1：；[0]1.11日311的对象来动态修改，使用#口日拘1111=￥日11161&口日拘1112 = value2的形式动态记录在U化中；前端解析带操作参数的U化并重现操作界面，使用户可W 轻松分享当前的操作界面。
[000引所述方法的解析U化重现操作界面的方法是：
[0009] 使用javascript编写代码，页面加载完毕获取location.hash字符串并解析成 json数据，根据json数据将界面重现。
[0010] 用户操作流程是：
[0011] 用户A在环境A中访问富应用程序并进行了若干的操作，用户A将记录了当前的操 作状态的TOL分享给用户B，用户B在环境B中使用A提供的U化直接访问富应用程序，富应用 程序会根据参数将A的操作结果重现给B。
[0012] 所述方法的具体实现流程是：
[0013] 第一步，编写解析和设置location. hash的逻辑：
[0014] 解析逻辑：如果Iocat ion. hash不为空，则将Iocat ion. hash转化为json形式；
[001引设置逻辑:hash的json数据中不存在该值，则添加到j son中；存在则重新赋值，将 json 转成成 Iocat ion. hash 的形式，并改变 Iocat ion. hash;
[0016]第二步，编写参数记录程序:在需要记录的操作中编写相应的事件监听，用户主动 触发了相应的事件，则使用第一步编写的解析设置逻辑设置location.hash的值；
[0017] 第立步，编写状态还原逻辑:在页面加载完毕时，若使用带错点的TOL访问本程序 则使用第一步编写的解析代码解析成json数据，根据当前的json数据对界面进行还原。
[0018] 本发明在前端采用无刷新的形式将用户的操作记录在U化中，用户可W轻松分享 当前的操作界面给他人，前端解析带操作参数的TOL并重现操作界面，能够轻松地分享界 面。本发明特别适合重视用户体现的富应用，例如AJAX请求数据、地图交互和图表交互等场 合。用户对前端界面的操作都会记录在TOL错点中，用户只需把完整的U化分享给其他使用 者，就可实现分享界面。
【附图说明】
[0019] 下面结合附图对本发明进一步说明：
[0020] 图1是本发明详细流程。
【具体实施方式】
[0021] 如图1所示，本发明【具体实施方式】如下：
[0022] 第一步，编写解析和设置location, hash的逻辑：
[0023] 解析逻辑：如果Iocat ion. hash不为空，则将Iocat ion. hash转化为json形式，代码 如下： v'af 疫约―hash 二 HmctionQ { var hash=location.hash.replace('#',").split('&'), params={}; 仿 r(var i= 'Q，len=hash.leng 化;
[0024] V 猫 'cufP:aram:=hash 川.split( params[curParam[0]]=curParam[ I ]; } r巧urn parmas;
[0025] 设置逻辑:hash的json数据中不存在该值，则添加到json中，存在则重新赋值，将 json转成成Iocat ion .hash的形式，并改变Iocat ion .hash,代码如下： var change_hash=function(config) { Varhash=U; for(var key in config) {
[0026] hash.push(key+'='+config [key]); } location.hash='#'+hash.join('&'); }；
[0027] 第二步，编写参数记录程序:在需要记录的操作中编写相应的事件监听，用户主动 触发了相应的事件，则使用第一步编写的解析设置逻辑设置location.hash的值。事件监听 的逻辑基本一致，均在用户触发相应的事件后对默认的全局变量进行设置，再调用统一的 图形生成接口来呈现界面，下面仅仅使用指标选择的事件监听来说明，代码如下：
[0028] //监听并记录指标选择
[0029] $(".submenu a").click(function(){
[0030] cur_report = this.邑etAttributeC report-index');
[0031] IoadData(cur_report,cur_area,cur_type)；
[0032] })；
[0033] 在图形生成的接口中统一设置location.hash,代码如下： //生成地图的接口
[0034] var showMap=function(data,area,index) { //I己-!托 hash change_hash( {viewType:0,report:index,area:area}), 八省略生成地图的逻辑 }； 八生成可视化图形的接口
[0035] var showChart=function(data,area,index,type)-! //'记hash cli施拱_h￡isli( -; viewType': l,rep 饼t: index,咏p:e;:.type，細ea:.c 册-area}); 八省略生成可视化图形的逻转
[0036] 第S步，编写状态还原逻辑:在页面加载完毕时，若使用带错点的U化访问本程序 则使用第一步编写的解析代码解析成json数据，根据当前的json数据对界面进行还原，代 码如下： !《loc 汹 ion.ha 如)'1 var pafams=get_hash(), Cmr-Kport=Panims [Yq)ort]; viewType=params[，viewType']; cur_are:a=p 批 ams:悼e 过'];
[0037] 巧 params['ty|)e'])《 Gur_type=params ['type']; } init_status{cur_repoit,cur_type,cur_area); IoadData{cur_report,cur_area,cur_type);
[00；3 引}。
【主权项】
1. 一种无刷新的URL参数动态记录加载方法，其特征在于：所述的方法是使用 javascript编写监听程序，对关键的操作进行记录并将结果动态记录在URL中，通过 location .hash的对象来动态修改，使用#paraml = value I&param2 = value2的形式动态记 录在URL中；前端解析带操作参数的URL并重现操作界面，使用户可以轻松分享当前的操作 界面。2. 根据权利要求1所述的无刷新的URL参数动态记录加载方法，其特征在于:所述方法 的解析URL重现操作界面的方法是： 使用javascript编写代码，页面加载完毕获取location, hash字符串并解析成json数 据，根据json数据将界面重现。3. 根据权利要求1所述的无刷新的URL参数动态记录加载方法，其特征在于：用户操作 流程是： 用户A在环境A中访问富应用程序并进行了若干的操作，用户A将记录了当前的操作状 态的URL分享给用户B，用户B在环境B中使用A提供的URL直接访问富应用程序，富应用程序 会根据参数将A的操作结果重现给B。4. 根据权利要求2所述的无刷新的URL参数动态记录加载方法，其特征在于：用户操作 流程是： 用户A在环境A中访问富应用程序并进行了若干的操作，用户A将记录了当前的操作状 态的URL分享给用户B，用户B在环境B中使用A提供的URL直接访问富应用程序，富应用程序 会根据参数将A的操作结果重现给B。5. 根据权利要求1至4任一项所述的无刷新的URL参数动态记录加载方法，其特征在于： 所述方法的具体实现流程是： 第一步，编写解析和设置location .hash的逻辑： 解析逻辑：如果location · hash不为空，则将location · hash转化为json形式； 设置逻辑:hash的json数据中不存在该值，贝lj添加到j son中；存在则重新赋值，将json 转成成 location · hash 的形式，并改变 location · hash; 第二步，编写参数记录程序:在需要记录的操作中编写相应的事件监听，用户主动触发 了相应的事件，则使用第一步编写的解析设置逻辑设置location.hash的值； 第三步，编写状态还原逻辑:在页面加载完毕时，若使用带锚点的URL访问本程序则使 用第一步编写的解析代码解析成json数据，根据当前的json数据对界面进行还原。
【专利摘要】本发明涉及前端开发技术领域，尤其是一种无刷新的URL参数动态记录加载方法。本发明是使用javascript编写监听程序，对关键的操作进行记录并将结果动态记录在URL中，通过location.hash的对象来动态修改，使用#param1＝value1&param2＝value2的形式动态记录在URL中；前端解析带操作参数的URL并重现操作界面，使用户可以轻松分享当前的操作界面。本发明提供了一种良好的直观的界面分享方法；可以用于用户界面的分享。
【IPC分类】G06F17/30
【公开号】CN105528426
【申请号】CN201510903749
【发明人】陈健豪, 李勇波, 孙傲冰, 季统凯
【申请人】国云科技股份有限公司
【公开日】2016年4月27日
【申请日】2015年12月9日