首页 > 其他分享 >前端补充:url编码

前端补充:url编码

时间:2024-04-09 19:57:43浏览次数:21  
标签:编码 wd 字符 url 前端 URL 字符串

一、URL 解码 / 编码详解

当 URL 路径或者查询参数中,带有中文或者特殊字符的时候,就需要对 URL 进行编码(采用十六进制编码格式)。URL 编码的原则是使用安全字符去表示那些不安全的字符。

安全字符,指的是没有特殊用途或者特殊意义的字符。

二、URL基本组成

  • URL 是由一些简单的组件构成
    • 比如协议、域名、端口号、路径和查询字符串等
    • 示例如下:
http://www.ccc.net/index?param=10
  • 路径和查询字符串之间使用问号?隔开。
    • 上述示例的域名为 www.ccc.net
    • 路径为 index
    • 查询字符串为 param=1。
  • URL 中规定了一些具有特殊意义的字符,常被用来分隔两个不同的 URL 组件,这些字符被称为保留字符。
    • 例如:
    • 冒号:
      • 用于分隔协议和主机组件,斜杠用于分隔主机和路径
    • ?:
      • 用于分隔路径和查询参数等。
    • =:
      • 用于表示查询参数中的键值对。
    • &:
      • 符号用于分隔查询多个键值对。
    • 其余常用的保留字符有:
      • / . … # @ $ + ; %

三、哪些字符需要编码

  • URL 之所以需要编码,是因为 URL 中的某些字符会引起歧义
    • 比如 URL 查询参数中包含了”&”或者”%”就会造成服务器解析错误;
    • 再比如,URL 的编码格式采用的是 ASCII 码而非 Unicode 格式,这表明 URL 中不允许包含任何非 ASCII 字符(比如中文),否则就会造成 URL 解析错误。
  • URL 编码协议规定(RFC3986 协议):
    • URL 中只允许使用 ASCII 字符集可以显示的字符,比如英文字母、数字、和- _ . ~ ! *这 6 个特殊字符。
    • 当在 URL 中使用不属于 ASCII 字符集的字符时,就要使用特殊的符号对该字符进行编码
    • 比如空格需要用%20来表示。
  • 除了无法显示的字符需要编码外,还需要对 URL 中的部分保留字符和不安全字符进行编码。
    • 下面列举了部分不安全字符:

[ ] < > " " { } | \ ^ * · ‘ ’ 等

  • 下面示例,查询字符串中包含一些特殊字符,这些特殊字符不需要编码:

http://www.ccc.net/index?param=10!*&param1=20!-~_

  • 下表对 URL 中部分保留字符和不安全字符进行了说明:

四、URL特殊字符编码

字符 含义 十六进制值编码
+ URL 中 + 号表示空格 %2B
空格 URL中的空格可以编码为 + 号或者 %20 %20
/ 分隔目录和子目录 %2F
? 分隔实际的 URL 和参数 %3F
% 指定特殊字符 %25
# 表示书签 %23
& URL 中指定的参数间的分隔符 %26
= URL 中指定参数的值 %3D
  • 下面简单总结一下,哪些字符需要编码
    • 分为以下三种情况:

ASCII 表中没有对应的可显示字符

例如:

​ 汉字。

​ 不安全字符,包括:# ”% <> [] {} | \ ^ ` 。

​ 部分保留字符,即 & / : ; = ? @ 。

五、Python实现编码与解码

  • Python 的标准库
    • urllib.parse模块中提供了用来编码和解码的方法
    • 分别是
      • urlencode()
      • unquote()
方法 说明
urlencode() 该方法实现了对 url 地址的编码操作
unquote() 该方法将编码后的 url 地址进行还原,被称为解码

1、编码urlencode()

  • 下面以百度搜索为例进行讲解。
    • 首先打开百度首页,在搜索框中输入“爬虫”,然后点击“百度一下”。
    • 当搜索结果显示后,此时地址栏的 URL 信息
    • 如下所示:
https://www.baidu.com/s?wd=爬虫&rsv_spt=1&rsv_iqid=0xa3ca348c0001a2ab&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ib&rsv_sug3=8&rsv_sug1=7&rsv_sug7=101
  • 可以看出 URL 中有很多的查询字符串
    • 第一个查询字符串就是“wd=爬虫”
    • 其中 wd 表示查询字符串的键
    • 而“爬虫”则代表您输入的值。
  • 在网页地址栏中删除多余的查询字符串,最后显示的 URL
    • 如下所示:
https://www.baidu.com/s?wd=爬虫
  • 使用搜索修改后的 URL 进行搜索,依然会得到相同页面。
  • 因此可知“wd”参数是百度搜索的关键查询参数。
  • 下面编写爬虫程序对 “wd=爬虫”进行编码
  • 如下所示:
# 导入parse模块
from urllib import parse

# 构建查询字符串字典
query_string = {
    'wd': '爬虫'
}
# 调用parse模块的urlencode()进行编码
result = parse.urlencode(query_string)
# 使用format函数格式化字符串,拼接url地址
url = 'http://www.baidu.com/s?{}'.format(result)
print(url)

# http://www.baidu.com/s?wd=%E7%88%AC%E8%99%AB
  • 编码后的 URL 地址依然可以通过地网页址栏实现搜索功能。
    • 除了使用 urlencode() 方法之外
    • 也可以使用 quote(string) 方法实现编码,代码如下:
from urllib import parse

# 注意url的书写格式,和 urlencode存在不同
url = 'http://www.baidu.com/s?wd={}'
word = input('请输入要搜索的内容:')
# quote()只能对字符串进行编码
query_string = parse.quote(word)
print(url.format(query_string))

# 请输入要搜索的内容:爬虫
# http://www.baidu.com/s?wd=%E7%88%AC%E8%99%AB

注意:

​ quote() 只能对字符串编码,

​ urlencode() 可以直接对查询字符串字典进行编码。

因此在定义 URL 时,需要注意两者之间的差异。

# urllib.parse
urllib.parse.urlencode({'key':'value'}) #字典
urllib.parse.quote(string) #字符串

2、解码unquote(string)

  • 解码是对编码后的 URL 进行还原的一种操作
    • 示例代码如下:
from urllib import parse

string = '%E7%88%AC%E8%99%AB'
result = parse.unquote(string)
print(result)

# 爬虫

3、URL地址拼接方式

  • 最后,给大家介绍三种拼接 URL 地址的方法。
  • 除了使用 format() 函数外,还可以使用字符串相加,以及字符串占位符
  • 总结如下:
    • 纯文本复制
# 1、字符串相加
baseurl = 'http://www.baidu.com/s?'
params = 'wd=%E7%88%AC%E8%99%AB'
url = baseurl + params
# 2、字符串格式化(占位符)
params = 'wd=%E7%88%AC%E8%99%AB'
url = 'http://www.baidu.com/s?%s' % params
# 3、format()方法
url = 'http://www.baidu.com/s?{}'
params = 'wd=%E7%88%AC%E8%99%AB'
url = url.format(params)

标签:编码,wd,字符,url,前端,URL,字符串
From: https://www.cnblogs.com/xiao01/p/18124657

相关文章

  • 前端-题目集合
    1.前端开发:JS事件循环机制  事件循环什么是事件循环(EventLoop)?众所周知,Javascript是一门单线程的语言,单线程即同一时间只能做一件事,但这并不意味着JavaScript在执行代码的过程中就会一直阻塞,而解决单线程不阻塞的这个机制就叫做事件循环(EventLoop),也就是......
  • 前端面试题 — 浏览器安全问题
    1.什么是XSS攻击?如何防范XSS攻击?XSS攻击是一种跨站脚本攻击,攻击者通过在网页中注入恶意脚本来获取用户信息或控制页面。防范XSS攻击的方法包括对用户输入进行过滤和转义、使用HTTP头部中的ContentSecurityPolicy(CSP)等。2.什么是CSRF攻击?如何防范CSRF攻击?CSRF攻击是一种跨......
  • srs+webrtc实现浏览器直播(仿b站页面,纯前端)
    关于srs请看我之前的博客,SRS实现网页和手机端简单直播。与之不同的是,浏览器推流需要使用werbrtc,因此只需要按srs官网配置即可,WebRTC|SRS(ossrs.net)。回到正题... 一.页面搭建b站web直播页面是通过video标签元素实现,但是video并不能同时将摄像头、麦克风、屏幕共享等同时......
  • eas_批量更新组织长编码,长名称
    protectedvoidrebuildOrgStructureDisplayName(Contextctx)throwsBOSException{/*555*/Connectionconn=null;/*556*/Statementstmt=null;/*557*/PreparedStatementpstmt=null;/*558*/ResultSetrs=null;/**/......
  • 从基础到高级,带你深入了解和使用curl命令(四)
    简介在网络通信和API调用中,发送GET和POST请求是常见的操作。curl命令作为一个功能强大的工具,不仅可以用于文件传输,还可以方便地发送各种类型的HTTP请求。本文将详细介绍如何使用curl命令发送GET和POST请求,并提供一些实用的技巧和示例。发送get请求发送GET请求是获取数据的常用......
  • xmlhttprequest upload 实现前端上传进度
    elementuiupload代码片段exportdefaultfunctionupload(option){if(typeofXMLHttpRequest==='undefined'){return;}constxhr=newXMLHttpRequest();constaction=option.action;if(xhr.upload){xhr.upload.onprogress=......
  • 前端【打包相关的配置项】【项目打包后本地查看配置】【去掉打包后js的map文件】【生
    1、打包后会生成dist目录,里面的index.html双击打开是空白的,需要部署到服务器上才能看到项目内容,此时可以通过vue.config.js中配置一个参数,这样本地打包完就可以看到效果vue.config.js1const{defineConfig}=require('@vue/cli-service')2module.exports=defineCon......
  • URL详解与URL编码
    URL详解与URL编码 作为前端,每日与URL打交道是必不可少的。但是也许每天只是单纯的用,对其只是一知半解,随着工作的展开,我发现在日常抓包调试,接口调用,浏览器兼容等许多方面,不深入去理解URL与URL编码则会踩到很多坑。故写下此篇文章,详解一下URL。URL与URI很多人会混淆这......
  • VUE - bigint解决前端精度丢失的问题
    VUE-bigint解决前端精度丢失的问题问题描述java后端long类型的范围-2^63~2^63,即:-9223372036854775808~9223372036854775807,它是19位的。这个数字可以通过方法获得:Long.MAX_VALUE、Long_MIN_VALUE。前端JS的数字类型的范围-2^53~2^53,即:-9007199254740991~900719925......
  • 前端【sass、scss、stylus、less、css】
    介绍less sass stylus 都是css预处理器,语法上稍有差异,作用一样都是让css,增强能力,具备变量,函数..的能力sass的语法两种语法.sass和.scss.sass和.stylus语法很像(了解)要求省略{}和分号,缩进表示嵌套使用$变量名:变量值  定义变量, 示例: ......