使用JavaScript提交form表单时如何向action接口添加动态请求参数

你可以直接修改表单的action属性拼接可变参数后再提交，以下是适配你现有代码的实现，共有3种可选方案：

方案1：直接拼接action地址 #

最简便的写法，适配你当前的action默认值/send-message?to的场景：

function sendMessage(form_id) {
    var form = document.getElementById(form_id);
    // 替换为你实际获取目标邮箱地址的逻辑
    const targetEmail = "receiver@example.com";
    // 拼接参数，用encodeURIComponent处理避免特殊字符导致URL解析错误
    form.action = `/send-message?to=${encodeURIComponent(targetEmail)}`;
    form.submit();
}

方案2：动态插入隐藏表单域 #

不需要修改原action属性，参数会自动随表单提交，同时兼容GET/POST请求：

function sendMessage(form_id) {
    var form = document.getElementById(form_id);
    const targetEmail = "receiver@example.com";
    // 创建隐藏的input元素
    const hiddenToInput = document.createElement("input");
    hiddenToInput.type = "hidden";
    hiddenToInput.name = "to";
    hiddenToInput.value = targetEmail;
    // 插入到表单中
    form.appendChild(hiddenToInput);
    form.submit();
}

方案3：用URL API标准化处理（推荐） #

如果后续action地址可能变更、或需要添加多个参数，用内置URL API处理不会出现拼接符号错误的问题，兼容性支持所有现代浏览器：

function sendMessage(form_id) {
    var form = document.getElementById(form_id);
    const targetEmail = "receiver@example.com";
    // 基于原action生成URL对象
    const actionUrl = new URL(form.action, window.location.origin);
    // 设置to参数，自动处理编码和拼接符号
    actionUrl.searchParams.set("to", targetEmail);
    // 赋值回表单的action属性
    form.action = actionUrl.toString();
    form.submit();
}

内容的提问来源于stack exchange，提问作者Mustafa Ghani