数组传递怪招：Ajax前端向后端传输数组的妙招

前端

2022-12-10 17:29:20

Ajax 向后端传递数组的终极妙招

还在为 Ajax 向后端传递数组而苦恼吗？ 不要再抓耳挠腮了，本文将揭秘一个巧妙的妙招，助你轻松搞定数组传输，实现数据无缝传递。

一、从前端向后端传输数组的痛点

在使用 jQuery.ajax 向后端发送数据时，我们经常会遇到一个棘手的问题：当传输的数据是一个数组时，后端无法正常获取数组中的值。 这是因为 JavaScript 中的数组在传输过程中会自动转换为字符串，导致后端无法识别。

二、妙招登场：巧妙转换，化繁为简

为了解决这一难题，我们需要借助一个巧妙的方法：将数组转换为字符串，然后再将字符串发送到后端。 而这个方法就是使用 JSON.stringify() 函数。

代码示例：

// 创建一个测试数组
var boxIds = new Array();
boxIds.push(12182);
boxIds.push(12183);
boxIds.push(12184);

// 使用 JSON.stringify() 将数组转换为字符串
var boxIdsString = JSON.stringify(boxIds);

// 使用 $.ajax() 发送字符串到后端
$.ajax({
  url: "/xxx",
  type: "GET",
  data: {
    "boxIds": boxIdsString,
    "boxTypes": "A,B,C"
  },
  success: function(response) {
    console.log(response);
  }
});

三、后端接收字符串，再转回数组

在后端，我们可以使用 JSON.parse() 函数将接收到的字符串重新转换为数组。

代码示例：

// 获取前端发送过来的字符串
$boxIdsString = $_GET["boxIds"];

// 使用 JSON.parse() 将字符串转换为数组
$boxIds = JSON.parse($boxIdsString);

// 现在，您就可以在后端使用 $boxIds 数组了
foreach ($boxIds as $boxId) {
  // ...
}