Javascript/AJAX-从表单获取参数数组

我得到了这个表单，它生成一个数组作为输出，我想通过AJAX将其发送到PHP页面。 表单是这样构建的：[使用更多的条目]

 <input type="hidden" name="reisdata[Van]" value="'.$reisdata["Van"].'">
 <input type="hidden" name="reisdata[Naar]" value="'.$reisdata["Naar"].'">

这是有人（@mephisto123）以前给我的代码，但这适用于预定义的javascript数组：

var postdata = {"provincie":"123","reisdata":{"Overstap":"234","Van":"345"}};
var post = "";
var url = "data-reis-refresh.php";
var key, subkey;
for (key in postdata) {
    if (typeof(postdata[key]) == object) {
        foreach (subkey in postdata[key]) {
            if (post != "") post += "&";
            post += key + "%5B" + subkey + "%5D=" + postdata[key][subkey];
        }
    }
    else post += key + "=" + postdata[key];
}
req.open("POST", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", post.length);
req.setRequestHeader("Connection", "close");
req.send(post);

---

如果字段名是用这样的名称生成的，那么没有什么特别的事情要做。只需收集表单参数，对名称和值进行URL编码，然后发布到服务器。（这个过程并不简单，因为您需要对不同类型的表单元素及其值的确定方式保持敏感，但复杂性与字段名的外观无关。）

作为术语说明，在JavaScript中，数组实例是以数字形式索引的。使用字符串属性名通常是JavaScript对象的一种功能，如果您不想让JavaScript程序员感到困惑，或者给您这样迂腐的指令，就不要将其称为“数组”

不过，在本例中，表单字段的名称是“有趣的”，JavaScript并不特别关心这一点

编辑-下面是一个函数的快速尝试，用于序列化表单中的所有元素：

function serialize( form ) {
  var rv = [], el = null, opt = null;
  form = form || document.forms[0];

  function ffv( name, value ) {
    return encodeURIComponent(name) + '=' + encodeURIComponent(value);
  }

  for (var i = 0; i < form.elements.length; ++i) {
    var el = form.elements[i];
    switch (el.tagName) {
      case 'INPUT': {
        switch (el.type.toLowerCase()) {
          case 'checkbox':
          case 'radio':
            if (el.checked)
              rv.push( ffv(el.name, el.value) );
            break;
          case 'text':
          case 'password':
          case 'hidden':
            rv.push( ffv(el.name, el.value) );
            break;
        }
        break;
      }
      case 'SELECT': {
        opt = el.options[el.selectedIndex];
        rv.push( ffv(el.name, opt.value || opt.innerText) );
        break;
      }
      case 'TEXTAREA': {
        rv.push( ffv(el.name, el.value) );
        break;
      }
    }
  }
  return rv.join('&');
}

默认情况下，编写的函数将序列化页面上的第一个表单。如有必要，您可以显式地将表单传递给它。我想旧版本的IE可能会有一些问题；特别是，我不记得“innerText”是否总是适用于

元素

该函数所做的是查看每个表单元素，找出它的值（以及它是否应该包含在提交中），然后创建表单的名称/值对

名称=值

名称和值都首先在内部“ffv（）”函数中进行编码，因此字段最终看起来像

reisdata%5BNaar%5D=某些内容

然后将整个输入列表与“&”连接起来，以创建要传递给PHP（或任何其他服务器端语言）的总体参数集

如果您想尝试jQuery，那么整个过程将非常简单。AJAX操作有一个丰富的API，但在您的情况下，它可以像

$.post( url, $('form').serialize(), function( result ) { ... } );

请各位读者： 最后，我使用了jQuery.post（）和.get（）。

---

这些都非常容易使用，而且速度更快、更灵活。

当你说要从JavaScript提交的表单中读取数组时，你不清楚你的意思。表单已提交到您的服务器，是否？你说服务器代码是PHP。对不起，这确实有点奇怪。我应该把提交的部分漏掉。它应该是：在提交表单时从表单中读取数组（当我使用：document.forms[formname].submit（）；）那么，为什么在提交表单时需要“读取数组”？您所需要做的就是为AJAX请求构建参数，表单字段名称显然已经是服务器所期望的格式。（如果不是，那么为什么表单是用字段名创建的？）而且，我不喜欢一般地推荐JavaScript框架，但是这个特殊的案例是一个很好的理由来考虑原型、jQuery或者任何简单的带有Ajax支持的框架。这类库可以为您处理一些浏览器的怪癖，它确实大大简化了流程。不过，如果您愿意的话，您当然可以自己完成。如果这在使用JQuery时非常容易，我完全同意。但是，你能给我解释一下怎么做吗？你是说Javascript不能处理关联数组，但它能正确处理我的关联数组？我觉得这有点奇怪？另外，我可以在我的代码中使用这个吗

var postdata document.formname.reisdata

JavaScript对象可以具有以字符串命名的属性，但它们通常不被称为“关联数组”（在JavaScript中）。真正的问题是，甚至不需要创建一个JavaScript对象来镜像服务器端关联数组结构，因为表单（根据您问题中的HTML）已经有了反映这一点的字段名。哦，好吧，这听起来非常合理！那么，使用代码

var postdata document.formname.reisdata

可以吗？（其中document.formname.reisdata将是关联数组/javascript对象，而不是手动输入的数组？）我不知道为什么它不会加载，但我只是更仔细地查看了代码，但它还是被破坏了：-）我将更新我的答案。好的，我将添加一个简短的描述。

req.send( serialize() );

$.post( url, $('form').serialize(), function( result ) { ... } );