JavaScript Ajax如何设置多同名查询参数给Python接口传数组

问题背景 #

现有Python后端接口支持通过同名查询参数传递多值数据，原生请求格式如下：
createdata?ob=120&st=cool&st=warm

后端通过如下代码即可将st解析为["cool","warm"]格式的数组：

st = request.query_params.getlist("st")
print(st) # 输出 ["cool","warm"]

使用jQuery ajax发起请求时，两种常见错误写法均无法达到预期：

• 写法1：在data对象中重复定义st键

$.ajax({
      type: "POST",
      url: "defapp/createdata",
      method: "GET",
      data: {"ob":130,"st":"warm","st":"cool"},
      contentType: "application/json",
      // 其余配置省略
})

该写法后端仅能拿到st值为["cool"]。

• 写法2：st直接传数组，保留默认序列化配置

$.ajax({
      type: "POST",
      url: "defapp/createdata",
      method: "GET",
      data: {"ob":130,"st":["warm","cool"]},
      contentType: "application/json",
      // 其余配置省略
})

该写法后端拿到的st为空数组[]。

失效原因 #

• 写法1失效：JavaScript原生对象不支持同名键，后定义的st: "cool"会直接覆盖前一个st: "warm"，最终序列化时只会保留最后一个值。
• 写法2失效有两点：
  1. contentType: "application/json"配置无效：GET请求参数是拼接在URL查询串中传递的，该配置仅针对请求体中的JSON数据生效，对URL参数无作用。
  2. jQuery默认序列化数组参数时，会自动给键名加[]后缀，最终生成的参数格式为st[]=warm&st[]=cool，和后端要求的纯同名st=xxx格式不匹配，因此getlist("st")无法匹配到对应参数。
     额外说明：代码中同时写type: "POST"和method: "GET"属于冗余配置，type是jQuery旧版本兼容属性，二者同时存在时以method的值为准，不需要重复声明。

正确实现方式 #

方案1：开启traditional传统序列化模式（推荐） #

jQuery ajax提供了traditional配置项，将其设为true时，会关闭数组参数的[]后缀自动追加逻辑，直接按照同名多参数的格式序列化，代码如下：

$.ajax({
      method: "GET",
      url: "defapp/createdata",
      data: {"ob": 130, "st": ["warm", "cool"]},
      traditional: true,
      success: function (res) {
        // 业务回调逻辑
      }
})

该配置下最终生成的请求URL为defapp/createdata?ob=130&st=warm&st=cool，和原生请求格式完全一致，后端可正常通过getlist("st")获取完整数组。

方案2：手动拼接查询串 #

如果需要完全控制参数格式，也可以直接将查询参数拼接到URL上，跳过jQuery的序列化逻辑：

$.ajax({
      method: "GET",
      url: "defapp/createdata?ob=130&st=warm&st=cool",
      success: function (res) {
        // 业务回调逻辑
      }
})

如果参数为动态生成，可以自行编写简单的序列化逻辑处理数组值后再拼接URL，避免格式偏差。

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