jQuery $.get()仅发送第一个参数 如何传全参数生成目标格式URL

问题根因 #

• jQuery的$.get()方法传入对象作为第二个参数时，默认会将参数序列化为查询字符串（格式为?key1=value1&key2=value2）追加到url末尾，而不是你需要的路径参数格式。你的后端路由应该只识别了路径里的第一个分段作为Id，忽略了后面的查询参数，所以看起来只收到了Id参数。
• 代码中读取DOM属性时写了大写的this.Name、this.Value，原生DOM的属性名是小写的name、value，导致这两个值读取结果为undefined，就算走查询字符串也传不对值。
• 现在的逻辑是每遍历到一个input就发送一次GET请求，如果你是要一次性提交所有表单参数，这个遍历逻辑也不符合需求。

修改方案 #

方案1：按期望的路径参数格式发送请求 #

如果确定后端接受/thisismyapiurl/Id/Name/Value格式的路径参数，直接手动拼接url即可，同时修正属性名大小写问题：

$('#myForm').submit(function (e) {
    e.preventDefault();
    const id = $('#dropdown').find(":selected").val();
    $('#myForm').children('input').each(function () {
        // 手动拼接路径参数
        const reqUrl = `/thisismyapiurl/${id}/${this.name}/${this.value}`;
        $.get(reqUrl);
    });
});

如果是要一次性提交所有表单参数，不需要遍历input，直接收集所有参数后拼接即可：

$('#myForm').submit(function (e) {
    e.preventDefault();
    const id = $('#dropdown').find(":selected").val();
    // 示例取第一个input的name和value，可根据实际需求调整参数收集逻辑
    const targetInput = $('#myForm').children('input').first();
    const reqUrl = `/thisismyapiurl/${id}/${targetInput.prop('name')}/${targetInput.prop('value')}`;
    $.get(reqUrl);
});

方案2：保留查询字符串传参，调整后端路由识别规则 #

如果不想改前端拼接逻辑，也可以把后端路由调整为识别查询参数，同时修正前端属性大小写问题即可：

$('#myForm').submit(function (e) {
    e.preventDefault();
    $('#myForm').children('input').each(function () {
        $.get("/thisismyapiurl/", { 
            Id: $('#dropdown').find(":selected").val(), 
            paramName: this.name, 
            paramValue: this.value 
        });
    });
});

此时请求url格式为/thisismyapiurl?Id=xxx&paramName=xxx&paramValue=xxx，后端对应取查询参数即可正常拿到所有值。

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