关于页面传参,decodeURI和decodeURIComponent

时间:2021-07-01 00:40:05

  之前写过一个关于页面传参的,但是是前端相对于自己的页面做的跳转,也就是页面1,跳转到页面2,里面带的参数。这里可以参考我上一篇文章,包括里面参数中如果有数组和json格式的情况。但是需要注意的是,我前面说的都是前端自己开自己的页面,按照我上面的操作是没有问题的,昨天的时候,发现了一个大问题,事情是这样的,数据都是java后台获取的,然后后台会给一个按钮附上链接,页面中的所有数据都是从这个链接中获取的。咱们先看下我们需要的数据是什么样的。

         var room_name = "房间名称(999999)";
var arr = [{
"heard_img":"./img/timg.jpg",
"id":123454,
"score":1024,
"name":"大雪"
},{
"heard_img":"http://img.duoziwang.com/2016/12/18/042435159529.jpg",
"id":123452,
"score":1022,
"name":"大雪2"
}];

这里就是需要传输的数据,然后对应的页面的话,请看下面的图片。

关于页面传参,decodeURI和decodeURIComponent

相信大家一眼就能看出来,room_name就是这个房间的名称,然后arr数组中,存放的就是这个参赛人员的数据,其中包括,参赛者的头像,姓名,id,得分情况。这个java后台要传输给我的。

经过我们的测试,后台给了我一个他encodeURI之后的数据,我这里也贴在下面,为了方便大家复制,我以代码的形式写在下面:

?room_name=%25E6%2588%25BF%25E9%2597%25B4%25E6%25A0%2587%25E9%25A2%2598%2528123456%2529&arr=%255B%257B%2522score%2522%253A1000%252C%2522name%2522%253A%2522%25E6%2588%2591%25E6%2598%25AF%25E7%258E%25A9%25E5%25AE%25B60%2522%252C%2522id%2522%253A999990%252C%2522heard_img%2522%253A%2522https%253A%252F%252Fwww.gushaoyang.cn%252Fbg.png%2522%257D%252C%257B%2522score%2522%253A500%252C%2522name%2522%253A%2522%25E6%2588%2591%25E6%2598%25AF%25E7%258E%25A9%25E5%25AE%25B61%2522%252C%2522id%2522%253A999991%252C%2522heard_img%2522%253A%2522https%253A%252F%252Fwww.gushaoyang.cn%252Fbg.png%2522%257D%252C%257B%2522score%2522%253A0%252C%2522name%2522%253A%2522%25E6%2588%2591%25E6%2598%25AF%25E7%258E%25A9%25E5%25AE%25B62%2522%252C%2522id%2522%253A999992%252C%2522heard_img%2522%253A%2522https%253A%252F%252Fwww.gushaoyang.cn%252Fbg.png%2522%257D%252C%257B%2522score%2522%253A-1500%252C%2522name%2522%253A%2522%25E6%2588%2591%25E6%2598%25AF%25E7%258E%25A9%25E5%25AE%25B63%2522%252C%2522id%2522%253A999993%252C%2522heard_img%2522%253A%2522https%253A%252F%252Fwww.gushaoyang.cn%252Fbg.png%2522%257D%255D

大家可以把这个url后面的参数直接放在现在的那种网站直接解析一下。这里给附上一个链接,百度到的随便哪一个都行。发现是能解析的,只要解析两次就可以了。但是发现到了程序中,使用两次decodeURI是不能正常解析的。解析出来以后,就是想没有解码完成似的,还有的没有给解开。经过旁边的PHP工程师的指点,应该是解码的方式不一样,导致了解码不完全,昨天我就在网上慢慢的寻找,终于知道了一个叫做decodeURIComponent的东西。这个是可以正常解码的。

  下面来具体的说一下,这两种解码的区别。其实就是这两种编码的区别,首先我们要知道编码是按照什么标准执行的,下面是我找到的资料,我就直接写在下面了,

RFC3986文档规定,Url中只允许包含英文字母(a-zA-Z)、数字(0-9)、-_.~4个特殊字符以及所有保留字符。RFC3986文档对Url的编解码问题做出了详细的建议,指出了哪些字符需要被编码才不会引起Url语义的转变,以及对为什么这些字符需要编码做出了相应的解释。

下面列出了这三个函数的安全字符(即函数不会对这些字符进行编码)

  • escape(69个):*/@+-._0-9a-zA-Z         这个基本上不会用到了,这里就不解释了。
  • encodeURI(82个):!#$&'()*+,/:;=?@-._~0-9a-zA-Z
  • encodeURIComponent(71个):!'()*-._~0-9a-zA-Z

  相信到这里大家就明白了,java后台的编码方式是encodeURIComponent,而我使用的是decodeURI解析的,造成了解析不完整。所以以后碰到这样的问题,首先是把这个编码的链接放在在线的解析链接的网站上,看看是不是能正常的解析出来哦我们想要的结果,如果得到了,那就需要看咱们的代码是不是decode错误了,反正就两种,自己试一下就可以了。

关于页面传参,decodeURI和decodeURIComponent的更多相关文章

  1. Strut2页面传参跳转 --Struts2

    1.本案例借助struts2框架,完成页面传参.跳转功能 2.代码实现 index.jsp: <form action="helloStruts2.action" metho ...

  2. FastAdmin 前端页面传参笔记

    FastAdmin 前端页面传参笔记 看到 QQ 群里的小伙伴询问如何传参,然后在社区里找到一笔记帖子 1 还要参考在线文档控制器部分2. 引用 Karson 的回复: 如果我们需要自己在控制器中透传 ...

  3. AngularJS中页面传参方法

    1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...

  4. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&amp&semi;vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  5. Angular页面传参的四种方法

    1. 基于ui-router的页面跳转传参 (1)在Angular的app.js中用ui-route定义路由,比如有两个页面, 一个页面(producers.html)放置了多个producers,点 ...

  6. jsp页面传参到action出现乱码

    jsp页面以连接方式传参到后台action时( <a href="http://localhost:8080/SocialBook/pages/bookdetail?book.id=& ...

  7. vue页面传参和接参

    https://blog.csdn.net/zhouzuoluo/article/details/81259298(copy) js** this.$router.push({ name: 'Flow ...

  8. html 跳转页面传参、点击获取DOM参数

    虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...

  9. ionic简单路由及页面传参

    1)页面跳转及传参方法 angular.module('app.routes', [])//routes路由模型 .config(function($stateProvider, $urlRouter ...

随机推荐

  1. 基础拾遗------webservice详解

    基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...

  2. 奇怪的UnexpectedRollbackException异常

    今天在使用一个原来常用的功能的时候,突然发现在某些场景下会报异常,内容如下: 通过断点调试发现一路都很顺畅,就是在从controller层返回前段的时候会报该异常,没办法,只能通过排除法定位问题,后来 ...

  3. 洛谷 P2733 家的范围 Home on the Range Label:二维数组前缀和

    题目背景 农民约翰在一片边长是N (2 <= N <= 250)英里的正方形牧场上放牧他的奶牛.(因为一些原因,他的奶牛只在正方形的牧场上吃草.)遗憾的是,他的奶牛已经毁坏一些土地.( 一 ...

  4. Eclipse&lowbar;luna&lowbar;J2EE&lowbar;For&lowbar;JS&plus;tomcat8&period;0环境搭建、配置、开发入门

    一.所有需要的软件.插件等下载地址 J2SE的官方下载路径:http://www.oracle.com/technetwork/java/javase/downloads/index.html Ecl ...

  5. JS 日期格式化

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"& ...

  6. Web安全攻防-----TCP&sol;IP安全篇

    知识点: 掌握TCP/IP的体系分层结构 掌握TCP/IP的各一层功能特点 掌握TCP/IP的数据在各层的名称 掌握TCP/IP的体系数据的封装和解封装 1.TCP/IP协议的历史 TCP/IP的起源 ...

  7. 如何将自己开发的标签打成jar包

    1: 在Myeclipse中新建一个java工程 2: 将你的标签处理器类统统都拷到工程里面, 将tld文件拷到META-INF里面 3:点击file里面的export,

  8. WCF探索之旅(一)——入门

    背景 对于.NET程序员来说,假设你不知道WCF,那仅仅能说明一点:你还是个菜鸟. 曾经也用.NET做过几个系统,尤其做后面的系统的时候,心里就有点沾沾自喜了! 想着,.NET也就这点东西,我如今也能 ...

  9. Spring源码阅读(四)

    我们知道,在spring bean生命周期中,我们可以在不同阶段执行处理器或者方法,比如init-method,destroy方法,BeanPostProcessor接口等.那么这些处理器或方法的执行 ...

  10. 聊天对话框(ctrl&plus;enter发送)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...