Question

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

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

并且php页面需要将数据作为数组接收。

现在，有人向我展示了这段代码，通过POST在AJAX中传递数组，但我仍然不知道如何在javascript中读取数组。

所以：如何在AJAX / Javascript中从表单中读取数组？ 我只需输入以下内容即可阅读：document.formname.reisdata？

这是我的AJAX代码：

// Algemene functie om een xmlHttp object te maken. Via dit object kunnen we later Ajax calls plaatsen

function GetXmlHttpObjectReisData() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } 
    catch (e) { // Internet Explorer
        try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) {
            try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    return xmlHttp;
}
function CallAjaxReisDataFunction(serverScript,arguments)
{
    var xmlHttp = new GetXmlHttpObjectReisData(); // Functie welke wordt uitgevoerd als de call naar de server klaar is State 4)
    xmlHttp.onreadystatechange = function()
    {
        if (xmlHttp.readyState == 4) 
        {
            handleReisDataResult(xmlHttp.responseText);
        }
    }

    // Ajax call (Request naar de server met eventuele parameters (arguments))
    xmlHttp.open("POST", serverScript, true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", arguments.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(arguments);
}

function callReisDataServer(serverScript,van,naar)
{
    CallAjaxReisDataFunction(serverScript,"?&reisdata=" + reisdata);
}

function handleReisDataResult(responseText)
{
    document.getElementById('reis').innerHTML = responseText;
}

这是某人（@ 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);

Answer 1

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

作为术语的注释，在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('&');
}

然后在XHR对象上调用“.send（）”时调用该函数：

req.send( serialize() );

默认情况下，写入的函数会序列化页面上的第一个表单。如有必要，您可以明确地传递表单。我想，旧版本的IE可能会遇到一些问题;特别是我不记得“innerText”是否总是适用于<option>元素。

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

名=值

名称和值都首先在内部“ffv（）”函数中编码，以便您的字段最终看起来像

reisdata％5BNaar％5D =东西

然后将整个输入列表与“＆amp;”连接在一起创建要传递给PHP（或任何其他服务器端语言）的整体参数集。

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

一样简单

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

Answer 2

对所有读者：最后，我最终使用了jQuery .post（）和.get（）。它们非常易于使用，速度更快，更灵活。

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

2 个答案: