Javascript / AJAX - получить массив параметров из формы

Question

У меня есть эта форма, которая генерирует массив в качестве вывода, и я хочу отправить ее через AJAX на страницу PHP. Форма построена так: [используется намного больше записей]

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

и страница php должна получить данные в виде массива.

Теперь кто-то показал мне этот кусок кода, чтобы передать массив в AJAX через POST, но я до сих пор не знаю, как прочитать массив в 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 экземпляр Array индексируется численно.Использование имен строковых свойств - это вообще возможность объектов JavaScript, и никто не ссылается на такие вещи, как «массивы», если вы не хотите, чтобы программисты JavaScript были сбиты с толку, или чтобы дать вам педантичную инструкцию, такую ​​как: -)

Опять же, в этом случае вы только что получили поля формы с "забавными" именами, и JavaScript не особенно заботится об этом.

edit - Вотбыстрая попытка функции сериализовать все элементы в форме:

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('&');
}

Затем вы вызовете функцию при вызове ".send ()" для вашего объекта XHR:

req.send( serialize() );

Как написано, функция по умолчанию сериализует первую форму на странице.Вы можете передать это форму явно, если это необходимо.Я полагаю, у него могут быть проблемы со старыми версиями IE;в частности, я не могу вспомнить, всегда ли «innerText» работает для <option> элементов.

Что делает эта функция, так это просматривает каждый элемент формы, выясняет его значение (и нужно ли его включать в отправку).), а затем создайте пару имя / значение в форме

имя = значение

И имя, и значение сначала кодируются во внутреннем "ffv"() "функция, так что ваши поля будут выглядеть как

reisdata% 5BNaar% 5D = что-то

Весь список входов затем объединяется с"& "чтобы создать полный набор параметров для передачи в PHP (или любой другой серверный язык в этом отношении).

Если вы захотите попробовать jQuery, то все это будет значительно проще.Существует богатый API для операций AJAX, но в вашем случае это может быть так просто, как

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

Answer 2

Просто для всех читателей: В конце концов я использовал jQuery .post () и .get (). Они чрезвычайно просты в использовании, намного быстрее и гибче.