問題：加號后台接收變空格問題
結論：
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" onclick="fade(this)">fade</button>
<div class="dialog fade " onclick="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 onclick="getAjax()">getAjax</button>
<button onclick="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