javascript - 如何在 HTTP POST 请求中处理二维数组

Question

我有一个如下所示的 HTML 表单，它使用二维数组来存储输入元素

<form action="/myAction" method="post">
  <input type="text" name="myList[1][NAME]" value="John" />
  <input type="text" name="myList[1][AGE]" value="20" />
  <input type="text" name="myList[2][NAME]" value="Mike" />
  <input type="text" name="myList[2][AGE]" value="30" />
  <input type="text" name="myList[3][NAME]" value="Sam" />
  <input type="text" name="myList[3][AGE]" value="40" />
  <input type="submit" value="submit" />
</form>

我想知道在HTTP请求中会传递多少个参数，是只有一个还是六个。我如何编写我的表单，以便将以上 6 个键值对作为一个参数传递。

感谢您的投入。

编辑: 看起来下面的请求在请求中发送了 6 个参数，我怎么能只为下面的表单发送参数

<form action="/myAction" method="post">
  <input type="text" name="myList[]" value="John" />
  <input type="text" name="myList[]" value="Peter" />
  <input type="text" name="myList[]" value="Mike" />
  <input type="text" name="myList[]" value="Neo" />
  <input type="text" name="myList[]" value="Stella" />
  <input type="text" name="myList[]" value="Eve" />
  <input type="submit" value="submit" />
</form>

Answer 1

默认情况下，表单将以application/x-www-form-urlencoded 内容类型提交，因此您的数据将由these 进行URI 编码。规则。

编码:

myList%5B%5D=John&myList%5B%5D=Peter&myList%5B%5D=Mike&myList%5B%5D=Neo&myList%5B%5D=Stella&myList%5B%5D=Eve

解码:

myList[]=John&myList[]=Peter&myList[]=Mike&myList[]=Neo&myList[]=Stella&myList[]=Eve

如果你只想提交一个参数，你应该在客户端编码你的数据，例如您可以用逗号分隔所有值。

这是一个工作示例(使用 jQuery):

$('form').submit(function(e) {
    processFormSubmission(this);
});

function processFormSubmission(formElem) {
    var arr = [];
    $(formElem).find(':input').each(function(i) {
        $(this).attr('disabled', 'disabled');    // prevent from submitting
        if( $(this).is(':submit') ) return true; // skip submit input field
        arr.push(this.value);
    });
    $('<input>').attr({type: 'hidden', name: '_data', value: arr.join(',')}).appendTo(formElem);
}

上面的代码会创建隐藏的_data输入，并将disabled属性添加到其他输入字段，因此它们不会被提交给服务器。

_data=John,Peter,Mike,NeoStella,Eve

在服务器端，您应该解码该数据，例如像这样:

// var_dump( $_POST );

if( ! empty( $_POST['_data'] ) {
    $myList = explode(',', $_POST['_data']);
    // var_dump( $myList );
}