Как отправить (поместить) значения «Array» в Ajax-запрос объекта XMLHttpRequest?

Question

Мы можем отправлять (помещать) отдельные значения для отправки в XMLHttpRequest с помощью Ajax.Но как отправить значения элемента «Массив»?

ПРИМЕР # 1 (ОК!)
Для этого простого значения:

<input type="hidden" name="param" value="hello" />

Мы можем просто поставитьзначение в объект XMLHttpRequest, например:

xmlhttp.open("GET","ajax.php?param="+document.getElementById("param").value,true);
xmlhttp.send();

Вышеописанный метод прост и нормален.
Но как насчет отправки (помещения) значений "Array"?

EXAMPLE #2 * (проблема со значениями массива)

<input type="hidden" name="param[]" value="hello" />
<input type="hidden" name="param[]" value="world" />
...
xmlhttp.open("GET","ajax.php?params="+document.getElementById("param").value,true);

Примечание: на стороне сервера будет PHP.

Answer 1

Разницы нет (кроме незначительного изменения названия). Это просто элементы с [] в атрибуте имени, если речь идет о HTML, JavaScript и HTTP. Только PHP требователен к соглашениям о присвоении имен для элементов управления формой (каждый другой встречающийся на стороне сервера язык имеет дело с ожиданиями использования одного или нескольких значений только на сервере, а не на сервере и клиенте)

Проблема в том, что ваш первоначальный подход не будет работать (за исключением старых IE и IE в режиме quirks). getElementById получает элемент по его ID , и ваши элементы имеют только имена.

Вы можете либо дать идентификаторы элементов, либо использовать getElementsByName('param[]') и цикл.

Обратите внимание, что вам также необходимо использовать encodeURIComponent для данных, чтобы обезопасить их от залипания в URL.

var inputs = document.getElementsByName('param[]');
var query = [];
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    query.push( encodeURIComponent(input.name) + '=' + encodeURIComponent(input.value) );
}
var url = "ajax.php?" + query.join('&');