使用Ajax的发送Get请求，Url被截断

最新推荐文章于 2023-08-03 11:42:51 发布

原创最新推荐文章于 2023-08-03 11:42:51 发布 · 632 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端

踩坑之路专栏收录该内容

2 篇文章

订阅专栏

在前端开发中，遇到使用Ajax发送Get请求时，由于Url中的roleName参数包含特殊字符'#'导致请求被截断的问题。通过分析发现，encodeURI方法不会对包括'#'在内的特定字符进行编码。解决方法是将encodeURI替换为encodeURIComponent，后者虽然会处理'#'，但更适合对Url进行编码，从而解决了请求被截断的难题。

请求参数，roleName中包含特殊字符"#"
发送请求的js代码

static request(param){

        let opt = param || {};
        opt.url = param.url || '';
        opt.async = param.async || true;
        opt.data = param.data || null;
        opt.success = param.success || function () {};

        let requestUrl = opt.url;
        requestUrl = this.appendGetParams(requestUrl, opt.data);
        requestUrl = encodeURI(requestUrl);

        $.ajax({
            url: requestUrl,
            contentType: 'application/x-www-form-urlencoded;charset=utf-8',
            type:"get",
            // xhrFields:{
            //     withCredentials:true
            // },
            dataType: opt.dataType || 'json'
        }).done(function (data) {
           ...
           ...
           ...
        });
    }

原因

encodeURI方法***不会***对下列字符编码 ASCII字母数字 ~!@#$&*()=:/,;?+'
解决

将encodeURI替换为encodeURIComponent

encodeURIComponent方法***不会***对下列字符编码 ASCII字母数字 ~!*()’，但是会处理"#"

对url进行encode的时候，根据需要选择不同的编码方式