jQuery中多词参数传递失效问题求助

我之前也碰到过一模一样的问题，根源很明确：你传递的带空格的参数没有做URL编码，直接拼进URL里会破坏参数结构，导致PHP那边解析出错。

你看，当os的值是"Unknown OS Type"时，直接拼到URL里会变成：

fetch_pages8.php?dfrom=xxx&dto=xxx&os=Unknown OS Type

这里的空格会被URL当成参数分隔的一部分，PHP解析时只会拿到os的值是"Unknown"，后面的"OS Type"会被当成无效的参数，自然就获取不到完整值了。而"Android"是单单词，没有空格，所以没问题。

给你两种解决方案，推荐第二种更省心：

方案一：手动编码参数值 #

用encodeURIComponent()函数对每个参数值进行编码，把空格转换成URL合法的%20：

// 初始加载记录
var encodedDfrom = encodeURIComponent(dfrom);
var encodedDto = encodeURIComponent(dto);
var encodedOs = encodeURIComponent(os);
$("#results").load(`fetch_pages8.php?dfrom=${encodedDfrom}&dto=${encodedDto}&os=${encodedOs}`);

// 分页点击事件
$("#results").on("click", ".pagination a", function (e){
    e.preventDefault();
    $(".loading-div").show();
    var page = $(this).attr("data-page");
    // 重新编码参数（如果dfrom/dto/os可能变化的话）
    var encodedDfrom = encodeURIComponent(dfrom);
    var encodedDto = encodeURIComponent(dto);
    var encodedOs = encodeURIComponent(os);
    $("#results").load(
        `fetch_pages8.php?dfrom=${encodedDfrom}&dto=${encodedDto}&os=${encodedOs}`,
        {"page":page},
        function(){
            $(".loading-div").hide();
        }
    );
});

方案二：用jQuery自动编码（推荐） #

把所有参数放到load()方法的第二个参数对象里，jQuery会自动帮你处理所有特殊字符的编码，不用手动操心：

// 初始加载记录
$("#results").load("fetch_pages8.php", {
    dfrom: dfrom,
    dto: dto,
    os: os
});

// 分页点击事件
$("#results").on("click", ".pagination a", function (e){
    e.preventDefault();
    $(".loading-div").show();
    var page = $(this).attr("data-page");
    $("#results").load("fetch_pages8.php", {
        dfrom: dfrom,
        dto: dto,
        os: os,
        page: page
    }, function(){
        $(".loading-div").hide();
    });
});

用这两种方式后，PHP那边直接用$_GET['os']就能拿到完整的"Unknown OS Type"值了，不需要额外处理，PHP会自动把编码后的%20转回到空格。

内容的提问来源于stack exchange，提问作者Ritesh gupta