加号变空格问题 url参数 post get 请求发送

最新推荐文章于 2023-11-09 18:12:33 发布

aodizhi5710

最新推荐文章于 2023-11-09 18:12:33 发布

阅读量522

点赞数

文章标签：前端 php javascript ViewUI

原文链接：http://www.cnblogs.com/swing07/p/8433585.html

版权

问题：加号后台接收变空格问题

结论：

1.任何get拼接的请求参数key value 需要编码后在拼接

2.get请求避免做数据提交，用post提交。jq,axios的post提交默认编码了不会有问题

3.php后台获取get请求和application/x-www-form-urlencoded的post请求，都自动urldedecode，所以如果请求参数

没有编码，会出现加号变空格问题

解决方案：

1. 按照form表单的方式提交， jq axios 按照表单的方式都没问题。

2.自己拼接的数据需要进行urlencode编码，前端可以用 encodeURIComponent 对key,value编码

遗留问题：

1. 不确定post的 multipart/form-data 有没有对参数进行urlencode编码

get请求的参数含有特殊字符需要编码后传输。

浏览器默认get 请求和 content-type为application/x-www-form-urlencoded的post请求都会对参数进行编码，服务端默认会解码获取参数。

浏览器前端js 编码

安全字符不同其他字符转换为%16进制值如空格 %20
escape （69 个） */@+-._0-9a-zA-Z
encodeURI （82 个） !#$&'()*+,/:;=?@-._~0-9a-zA-Z
encodeURIComponent （71 个） !'()*-._~0-9a-zA-Z   ( 注意+ 号未在其安全字符里)

适用场合不同
encodeURI 被用作对一个完整的URI 进行编码，而encodeURIComponent 被用作对URI 的一个组件进行编码。浏览器get请求

php

urlencode (65) -_.0-9a-zA-z 特殊空格则编码为加号（+）

rawurlencode(65) -_.0-9a-zA-z 空格没有特殊处理

返回字符串，此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号（%）后跟两位十六进制数，空格则编码为加号（+）。此编码与 WWW 表单 POST 数据的编码方式是一样的，同时与 application/x-www-form-urlencoded 的媒体类型编码方式一样。由于历史原因，此编码在将空格编码为加号（+）方面与 RFC1738 编码（参见 rawurlencode()）不同。

rawurlencode 函数：

返回字符串，此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号（%）后跟两位十六进制数。这是在 » RFC 3986 中描述的编码，是为了保护原义字符以免其被解释为特殊的 URL 定界符，同时保护 URL 格式以免其被传输媒体（像一些邮件系统）使用字符转换时弄乱。

下面为请求测试代码

结论：

# form method="get" enctype="application/x-www-form-urlencoded"
<input name="v2" value="form get request 123 我+123" disable>
/index/test?v1=&v2=form+get+request+123+%E6%88%91%2B123
结果：一致
[v2] => form get request 123 我+123

# form method="post" enctype="application/x-www-form-urlencoded"
<input name="v2" value="form get request 123 我+123" disable>
/index/test?v1=&v2=form+get+request+123+%E6%88%91%2B123
结果：一致
[v2] => form get request 123 我+123

# form method="post" enctype="multipart/form-data"
<input name="v2" value="form post multipart/form-data request 123 我+123" disable>
/index/test?v1=&v2=form+get+request+123+%E6%88%91%2B123
结果：一致
[v2] => form get request 123 我+123

# a
<a href="http://192.168.2.251/index/test?v2= a get request 123 我+123">跳转</a>
/index/test?v2=%20a%20get%20request%20123%20%E6%88%91+123
结果：不一致
[v2] => a get request 123 我 123

# axios
## get
1.
url = 'http://192.168.2.251/index/test?v2= a get request 123 我+123'
axios.get(url)
结果：不一致
发送形式：http://192.168.2.251/index/test?v2=%20a%20get%20request%20123%20%E6%88%91+123
[v2] => a get request 123 我 123
2.
url = 'http://192.168.2.251/index/test'
let data = {
params:{v2: ' a get request 123 我+123'}
}
axios.get(url,data)
结果：一致
发送形式：http://192.168.2.251/index/test?v2=+a+get+request+123+%E6%88%91%2B123
[v2] => a get request 123 我+123
## post

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="/" class="trans_effect">摸我！</a>
<button class="fade in" οnclick="fade(this)">fade</button>
<div class="dialog fade " οnclick="fade()" >
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
<iframe width="100%" height="300" src="http://jsrun.net/6ZYKp/embedded/all/light/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<form method="get" action="http://192.168.2.251/index/test">
<input name="v1">
<input name="v2" value="form get request 123 我+123" disable>
<button type="submit">submit get</button>
</form>
<form method="post" enctype="application/x-www-form-urlencoded" action="http://192.168.2.251/index/test">
<input name="v1">
<input name="v2" value="form post application/x-www-form-urlencoded request 123 我+123" disable>
<button type="submit">submit post application/x-www-form-urlencoded</button>
</form>
<form method="post" enctype="multipart/form-data" action="http://192.168.2.251/index/test">
<input type="file" name="v1">
<input name="v2" value="form post multipart/form-data request 123 我+123" disable>
<button type="submit">submit post multipart/form-data</button>
</form>
<div><a href="http://192.168.2.251/index/test?v2= a get request 123 我+123">跳转</a></div>
<div>
<button οnclick="getAjax()">getAjax</button>
<button οnclick="postAjax()">postAjax</button>
</div>
</body>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function getAjax(){
url = 'http://192.168.2.251/index/test?v2= a get request 123 我+123'
axios.get(url)

url = 'http://192.168.2.251/index/test'
let data = {
params:{v2: ' a get request 123 我+123'}
}
axios.get(url,data)

// 接收有问题
url = 'http://192.168.2.251/index/test?v2= a get request 123 我+123 $'
$.get(url)
// 接收没问题
url = 'http://192.168.2.251/index/test'
data = {
v2: ' a get request 123 我+123 $$'
}
$.get(url,data)
}

function postAjax(){
url = 'http://192.168.2.251/index/test'
// let data = {}
// data.params = {
// v2: ' a get request 123 我+123',
// v1: 'aa'
// }
// let data = 'v2='+encodeURIComponent(' a get request 123 我+123')
let data = 'v2= a get request 123 我+123'
let config = {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}};
axios.post(url,data,config)

var params = new FormData();
params.append('v2', 'a get request 123 我+123 FormData');
axios.post(url, params);

data = {
v2: ' a get request 123 我+123 $',
v1: 'aa $'
}
$.post(url, data)
}
</script>
<script>
function fade (that) {
// body...
console.log(that.style.opacity);
console.log(that);
that.style.opacity=that.style.opacity==0?1:0;
that.style.display="block";
that.style.background=0xfff;
}
</script>
</html>

参考:

http://www.jb51.net/article/96511.htm

转载于:https://www.cnblogs.com/swing07/p/8433585.html

aodizhi5710

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
加号变空格问题 url参数 post get 请求发送

问题：加号后台接收变空格问题结论：1.任何get拼接的请求参数key value 需要编码后在拼接2.get请求避免做数据提交，用post提交。jq,axios的post提交默认编码了不会有问题3.php后台获取get请求和application/x-www-form-urlencoded的post请求，都自动urldedecode，所以如果请求参数没有编码，会出现...
复制链接

扫一扫