IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    jQuery ajax 方法 data 参数默认 encode 失败的 bug

    keelii发表于 2018-05-26 02:20:04
    love 0

    使用 jQuery ajax 方法调用异步接口时 data 参数默认会被添加转码 encodeURIComponent,如下:

    $.ajax({
        url: 'http://your.domain.com/action',
        dataType: 'jsonp',
        data: {
            spaces: 'a b',
            other: '&'
        }
    })
    

    上面的代码会向 http://your.domain.com/action?spaces=a+b&other=%26 发送 get 请求,奇怪的是参数中的 & 被正确转码成 %26,但是 被转成了 + 而不是 %20

    看看正确的转码结果长啥样

    encodeURIComponent('&') // => "%26"
    encodeURIComponent(' ') // => "%20"
    

    既然 data 参数里面的 key,value 都要被 encodeURIComponent,那么出现这种情况只能去查 jQuery 源代码了。jQuery 会调用 $.param 方法来编码 data 参数,大概在 jQuery-1.7.2 的 (7736) 行:

    param: function( a, traditional ) {
        // ...
        } else {
            // If traditional, encode the "old" way (the way 1.3.2 or older
            // did it), otherwise encode params recursively.
            for ( var prefix in a ) {
                buildParams( prefix, a[ prefix ], traditional, add );
            }
        }
    
        // Return the resulting serialization
        return s.join( "&" ).replace( r20, "+" );
    }
    

    param 方法内部会再调用 buildParams 来把 data 对象键值对添加编码,一切都很正常

    然饿最后一行 replace( r20, "+" ) 是什么鬼!r20 变量是内部的一个空白转义符的正则 /%20/g

    这就有点意思了,为啥把正确的空格编码再转回 + 呢?

    外事不决问 Google,搜索 why jquery ajax convert %20 to + 结果发现有一条 jQuery 官方的 github issue: Only change %20 to + for application/x-www-form-urlencoded

    google-why-jquery-convert-space-to-plus

    根据 issue 的描述大意是说 convert %20 to + 这个逻辑只应该在 POST 请求的时候做转换,而不是所有请求。我们的示例中的 jsonp 刚好是 get 请求

    继续往下看找到了一个 commit(60453ce) 修复了这个问题

    jquery-param-encode-bug

    注意一点,我们并不能简单的在 data 对象传入的时候手动添加 encodeURIComponent:

    $.ajax({
        url: 'http://your.domain.com/action',
        dataType: 'jsonp',
        data: {
            // 错误的做法
            spaces: encodeURIComponent('a b'),
            other: '&'
        }
    })
    

    如果 spaces 参数有别的应该被正常编码的字符串,这样会导致正常的被编码的字符被 两次 encodeURIComponent。所以要正确解决这个问题需要修改 jQuery 源代码,这个可以参考上面的那个 fix commit



沪ICP备19023445号-2号
友情链接