无JQuery实现WordPress Ajax URI参数编码的方案优化问询

问题背景 #

在WordPress中实现无jQuery的Ajax调用，已完成URI参数编码功能，但存在两个待优化点：

• 不确定是否有更合适的原生JS替代方案处理复杂参数序列化
• 当前通过if (!recur) res = res.slice(0, -1);移除末尾&的写法不够优雅，寻求更优解

优化方案 #

1. 原生JS替代思路：结合数组收集+原生编码处理 #

原生URLSearchParams可处理基础键值对序列化，但对嵌套数组/对象的格式兼容性不足（无法生成PHP后端期望的data[0][0]结构）。我们可以通过递归收集参数片段的方式，既保留对复杂结构的支持，又利用原生encodeURIComponent保证编码安全性。

2. 移除末尾&的优雅方案 #

不再通过字符串拼接后截取末尾字符，而是用数组收集所有参数键值对片段，最后使用&连接数组元素。这种方式从根源上避免了多余的末尾&，同时可移除冗余的recur标记，简化递归逻辑。

修改后的实现代码 #

JavaScript部分 #

const action = "action_name";
const nonce = "nonce_value";
const data = [
    [1, 2, "abc", 3, false, "ciao"],
    "ciao",
    123,
    5213515,
    {
        name: "Tanto va la gatta al lardo",
        slug: "tanto-va-la-gatta-al-lardo"
    },
    {
        key: "ciao",
        test: ["a", "b", "ciao"]
    },
    {
        name: "Tre tigri contro tre tigri",
        slug: "tre-tigri-contro-tre-tigri"
    }
];

function arrayToEncodedString(
    obj,
    varName = "data",
    encode = true,
    prevKey = ""
) {
    const params = [];

    for (const key in obj) {
        const value = obj[key];
        const currentKey = prevKey ? `${prevKey}[${key}]` : `${varName}[${key}]`;

        if (typeof value === "object" && value !== null) {
            // 递归收集子参数片段
            params.push(...arrayToEncodedString(value, varName, encode, currentKey));
        } else {
            let keyStr = currentKey;
            let valueStr = String(value);
            if (encode) {
                keyStr = encodeURIComponent(keyStr);
                valueStr = encodeURIComponent(valueStr);
            }
            params.push(`${keyStr}=${valueStr}`);
        }
    }

    return params;
}

function prepareForAjax(data, action, nonce, encode = true, varName) {
    const baseParams = [
        `action=${encode ? encodeURIComponent(action) : action}`,
        `nonce=${encode ? encodeURIComponent(nonce) : nonce}`
    ];
    const dataParams = arrayToEncodedString(data, varName, encode);
    return baseParams.concat(dataParams).join("&");
}

function highlightURLParameters(paramString) {
    const regex = /([^&=]+)=([^&]+)/g;
    return paramString.replace(
        regex,
        (match, key, value) => 
            '<span class="key">' + key + '</span>=<span class="value">' + value + "</span>"
    );
}

document.getElementById("resRaw").innerHTML = highlightURLParameters(
    prepareForAjax(data, action, nonce, false)
);

document.getElementById("res").innerHTML = highlightURLParameters(
    prepareForAjax(data, action, nonce)
);

CSS部分 #

.wrapper {
  font-family: monospace;
}

pre {
  background-color: #232323;
  border: 2px solid #000;
  padding: 10px;
  color: white;
  white-space: pre-wrap;
}

.key,
.value {
  font-weight: bold;
  margin: 0 5px;
}

.key {
  color: cyan;
}

.value {
  color: orange;
}

HTML部分 #

<div class="wrapper">
  <b>待发送数据:</b><br>
  <pre id="resRaw"></pre>
  <b>编码后的字符串:</b><br>
  <pre id="res"></pre>
</div>

优化说明 #

1. 数组收集参数片段：递归过程中用数组存储每个key=value片段，最后通过join("&")拼接，彻底避免了末尾多余的&，同时移除了繁琐的recur标记。
2. 兼容复杂结构：保留了对嵌套数组、对象的递归处理，生成的参数格式完全兼容WordPress后端的PHP解析逻辑。
3. 原生编码保留：继续使用encodeURIComponent处理特殊字符，确保参数传递的安全性。

内容的提问来源于stack exchange，提问作者Glob Dug