zoukankan      html  css  js  c++  java
  • 加号变空格问题 url参数 post get 请求发送

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

    结论:

    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

  • 相关阅读:
    简单网络问题排查记录一
    安装mysql_sniffer报错undefined reference to symbol 'pthread_setspecific@@GLIBC_2.2.5'问题
    tengine安装ngx_http_lua_module
    Django——URL详解/Django中URL是如何与urls文件匹配的
    Python学习——enumerate
    Python学习——装饰器/decorator/语法糖
    缓存优化
    页面重绘 回流及其优化
    window.getComputedStyle()方法的使用及其扩展
    java 三个循环的优缺点
  • 原文地址:https://www.cnblogs.com/swing07/p/8433585.html
Copyright © 2011-2022 走看看