如何使用 JQuery AJAX 在 GET 请求中将数组作为查询字符串传递

Question

在我的 javascript 应用程序中，我尝试使用 jQuery Ajax 在 GET 请求中将字符串数组以及其他参数传递给 ASP.NET Web API REST 服务。 示例网址如下：

http://my.services.com/products?userId=1abc&id=1&id=2&id=3

Web API 方法的签名：

[HttpGet("products")]
public IActionResult GetProducts(string userId, int[] id)

如果我使用 Postman 尝试请求，则参数绑定可以正常工作。在 Javascript 应用程序中，我尝试了几种解决方案，但都没有成功。代码如下：

let data = {
  'userId': '1abc'
  'id': [1,2,3]
}

$.ajax({
   type: 'get',
   url: 'http://my.services.com/products',
   data: data,
   crossDomain: true, //CORS
   cache: false,
}

在这种情况下，URL 变为：

http://my.services.com/products?userId=1abc&id%5B%5D=1&id%5B%5D=2&id%5B%5D=3

由于在解析结果中不是使用id作为key，而是使用id[]，因此将字符[]编码为%5B和%5D。

即使我使用此代码也没有运气：

let data = {
  'userId': '1abc'
  'id': JSON.stringify([1,2,3])
}

或（如answer所示）

let data = {
  'userId': '1abc'
  'id[]': [1,2,3]
}

请记住，对于其他调用，上面的代码 JQuery AJAX 代码可以正常工作。

Answer 1

请求的问题是因为默认的 ASP.Net 模型绑定器期望数组作为单独的键/值对通过查询字符串发送，如您的第一个示例 URL 所示。

要实现这一点，您只需在 jQuery $.ajax() 请求中设置 traditional: true：

let data = {
  userId: '1abc'
  id: [ 1, 2, 3 ]
}

$.ajax({
  type: 'get',
  url: 'http://my.services.com/products',
  data: data,
  traditional: true
});

另外，作为旁注，在发出 AJAX 请求时要小心使用绝对 URL，如果代码没有定期维护，您很容易遇到 CORS 问题。我建议尽可能使用相对路径。