javascript的编码-[javaScript]encodeURI 解决为什么传递URL时需要执行两次e

2023-08-21 0 3,981 百度已收录

阐明:

1.encodeURL函数主要用于对URI进行转码,默认使用UTF-8编码。

2、UTF-8编码格式:一个汉字由三个字节组成,每个字节都会转为十六进制编码,同时会添加一个%符号。

我们先看一段后端代码:

/**
  *初始化datagrid
  */
  function initDatagrid(id,typevalue,organame){
     
      var url="${base}/organization/queryOrganizationList.action?id="+id+"&typevalue="+typevalue+"&organame="+organame+""    ; 
      url=encodeURI(encodeURI(url));
      $("#dataGridObject").datagrid({
          title:'', //标题
          method:'post',
          border:false,
          singleSelect:false, //多选
          fitColumns: true, //自动调整各列,用了这个属性,下面各列的宽度值就只是一个比例。
          striped: true, //奇偶行颜色不同
          collapsible:true,//可折叠 
          url:url, //数据来源
          queryParams:params, //查询条件
          pageSize:20,
      })

看到这段代码的朋友可能会有疑问,为什么url需要编码两次enCodeURL(enCodeURI(url)),我们先不回答,先看一下后台代码

@SuppressWarnings("rawtypes")
    @RequestMapping(value = "organization/queryOrganizationList")
    @ResponseBody
    public Map<String, Object> queryOrganizationList(HttpServletRequest request, PageRequest pageRequest,QueryOrganizationParamsVO paramsVO, 
            int page, int rows,String id,String typevalue,String organame) throws UnsupportedEncodingException {
        Map<String, Object> map = new HashMap<String, Object>();
        pageRequest.setPageSize(rows);
        pageRequest.setPageNo(page);
        AuthInfo  logininfo=SessionUtil.getLoginUsers(request).get(0);
        String orgid=logininfo.getOrganId();
        //注意:使用java.net.URLDecoder.decode()函数解码,获取机构名称的中文
        organame=java.net.URLDecoder.decode(organame , "UTF-8");
        try {
            Page pages = this.organizationService.queryOrganizationList(pageRequest, paramsVO,id,typevalue,orgid,organame);
            map.put("total", pages.getTotalCount());
            map.put("rows", pages.getRows());
        } catch (Exception e) {
            System.out.println(e.getMessage());
            map.put("total", 0);
            map.put("rows", 0);
        }
        return map;
    }

后台使用java.net.URLDecoder.decode(organaname, “UTF-8”)函数对url传过来的组织名称进行解码,得到组织名称的英文字符串。 为什么后台需要输入两次url? 编码,当我们在后台访问组织名称时,不会出现乱码。 这里我给大家展示一下需要对URI进行两次encode的原因和解释。 我个人认为还是比较清楚的。 希望可以帮助你理解。

这里是对URI进行两次编码的原因和解释::

具体来说,具体原理分析如下。 假设页面传入的组织名称(organname)中文名称为:“中”,按照以下步骤进行解码

1、对于第一个encodeURI,按照utf-8的方法获取字节字段并转换为[-28,-72-83],遍历字节码字段javascript的编码,将每个字节转换为对应的十六进制数。 这样就变成了[E4,B8,AD],最后变成了[%E4,%B8,%AD]

2、对于第二个encodeURI,将链表做成[%25E4,%25B8,%25AD],然后将处理后的数据[%25E4,%25B8,%25AD]发送到服务器。

当应用服务器调用getParameter方法时,getParameter方法会向应用服务器请求参数,应用服务器初步获取发送的[%25E4,%25B8,%25AD]。

应用服务器会对这些数据进行URLdecode操作,URldecode操作和encodeURL操作是相反的操作,处理结果为[%E4,%B8,%AD],并将这个值返回给getParameter技术,然后在服务器端相应的URL转码方法或功能可以将数据恢复为原始页面发送的英文“中文”。

URL编码和encodeURI两次

使用地址栏提交查询参数时,如果不进行编码,非英文字符会按照操作系统的字符集进行编码并提交给服务器,服务器会按照配置的字符集进行解码javascript的编码,所以如果两者不一致,就会造成乱码。

encodeURI函数使用UTF-8对URL进行编码,因此如果服务器在解码时使用其他编码方式,就会出现乱码。 服务器配置的默认解码字符集不是UTF-8,所以大多数情况下地址栏提交英文查询参数时会形成乱码; 对于这些情况,可以连续使用两次encodeURI在客户端(主要指浏览器)对非英文字符进行编码,然后使用java.net.URLDecoder(String."UTF on the server -8")解码,你就能得到正确的英语。

如果只encodeURI一次,得到的是UTF-8的URL,服务器通过request.getParameter()对查询参数(通常是iso-8859-1)进行解码,得到乱码。

如果进行两次encodeURI,第一次编码得到的URL是UTF-8,第二次编码得到的URL仍然是UTF-8,但从疗效上来说,相当于第一次UTF-8编码(此时已经全部转为ASCII字符了),然后进行一次iso-8859-1编码,因为UTF-8编码和ISO-8859-1编码对汉字的效果是一样的。 在服务器端,通过request.getParameter()自动进行第一次解码(可能是gb2312、gbk、utf-8、iso-8859-1等字符集,对结果没有影响),得到ascii字符,然后使用UTF -8进行第二次解码,通常使用java.net.URLDecoder("", "UTF-8")方法。

两次编码两次解码的过程为:

UTF-8编码->UTF-8(iso-8859-1)编码->iso-8859-1解码->UTF-8解码,编码和解码的过程是对称的,所以不会出现乱码。

encodeURL函数主要用于对URI进行转码,默认使用UTF-8编码。

。 UTF-8编码格式:一个汉字由三个字节组成,每个字节会转为十六进制编码,同时添加%符号。

总结:

1.前端进行两次编码(使用utf-8编码格式)

2.后台服务器会手动解码一次,但不是按照utf-8格式

3、两次编码两次解码的过程(重点):

UTF-8编码->UTF-8(iso-8859-1)编码->iso-8859-1解码->UTF-8解码,编码和解码的过程是对称的,所以不会出现乱码。

明天给大家带来的是几大厂商的后端代码规范。

后端代码规范

代码有几万行javascript编码,安全是第一行; 后端不规范,同学哭两行。

腾讯

它还包含很多内容:

PC端专题:快速入门、文件目录、页面、总标题、总脚、统计代码、兼容性测试

中国联通主题:快速入门、文件目录、页颈、REM布局、通用脚、统计代码、共享组件、兼容性要求

双端官网:快速启动、页面跳转

但上述部分内容是针对其业务而言的,并不具有普遍性。

易迅

对比腾讯的代码规范,我推荐凸凹实验室的代码规范,比较完整。

HTML规范

基于W3C、Apple开发者等官方文档,并结合团队日常业务需求以及团队在日常开发过程中总结提炼的经验,达成一致。

图像规格

了解各种图像格式的特点,根据特点制定图像规范,包括但不限于图像质量协议、图像导入形式、图像合并处理等。

CSS规范

统一团队CSS代码编写和SASS预编译语言的语句风格,提供通用媒体查询语句和浏览器私有属性引用,从业务层面统一通用模块的引用。

命名约定

从“目录命名”、“图片命名”、“ClassName”命名等方面javascript编码,约定并规范了团队的命名习惯,提高了团队代码的可读性。

JavaScript 规范

统一团队的JS句型和写作习惯,减少程序出错的机会,其中还包括ES6句型规范和最佳实践。

凹凸实验室:

阿里巴巴

包含:类型、对象、数组、字符串、函数、属性、变量、提升、比较运算符和等号、块、注释、空白、逗号、分号、类型转换、命名规则、访问器、构造函数、事件、模块、jQuery、 ECMAScript5 兼容性、测试、性能、资源、JavaScript 风格手册说明

Airbnb Javascript 风格指南:

百度

JavaScript编码规范、HTML、CSS、Less、E-JSON数据传输标准、模块和加载器、包结构、项目目录结构、图表库标准、React编码规范。

示例:缩进

// good switch (variable) {      case '1':         // do...         break;      case '2':         // do...         break;      default:         // do...  }  // bad switch (variable) {  case '1':     // do...     break;  case '2':     // do...     break;  default:     // do...  } 

复制

规范文件:

网易编码规范:

CSS 规范:帮助您构建和管理样式的规则和技术的集合

HTML规范:一系列建议和技巧,帮助您构建简单而严谨的结构

工程师规范:后端页面开发工程师的工作流程和团队协作规范

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript javascript的编码-[javaScript]encodeURI 解决为什么传递URL时需要执行两次e https://www.wkzy.net/game/139618.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务