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

Question

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

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用作键，它使用id[]，因此将字符编码[]为%5B和%5D。

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

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

或（如本答案所示）

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

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

Answer 1

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

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

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

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

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