Урок - jQuery.param()

Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод jQuery.param() создает строку - сериализованное представление массива или объекта, пригодного для использования в URL-е илл в AJAX-запросе.

Синтаксис метода jQuery.param()

jQuery.param(obj [, traditional]);

где

  • obj - Array или PlainObject, массив или объект для сериализации.
  • traditional - Boolean, логическое значение указывающее, следует ли выполнять традиционную "мелкую"/"shallow" сеарилизацию.

Функция jQuery.param() использует для преобразования значений элементов формы в сериализованное строковое представление (См. jQuery.serialize() для более подробной информации).

С версии jQuery 1.3 возвращаемо значение jQuery.param() является строка.

С версии jQuery 1.4 метод jQuery.param() сериализация производится рекурсивно, для сложных объектов и массивов. Отключить эту опцию можно глобально:

jQuery.ajaxSetings.traditional = true;

Если передается для сериализации Array, то восстанавливаться с помощью jQuery.serialize() должен тоже Array.

Примечание: В связи с тем, что некоторые фреймворки имеют огрниченные возможности для анализа сериализованного массива, разработчикам следует проявлять осторожность при передаче данных содержащих вложные вложенные объекты друг в друга.

Примечание: так как не существует универсального согласованной специфиакции параметров для сериализованной строки, это делает затруднительным универсальное кодирование сложных структур данных, используя метод jQuery.param(). До тех пор метод jQuery.param() останется без изменений.

В версии jQuery 1.4 Input-элементы HTML5 также сериализуются.

Мы можем отобразить строку запроса объекта и в виде URI-декориовании следующим образом:

var myObject = {
    a: {
        one: 1,
        two: 2,
        three: 3
    },
    b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);

Значения recursiveEncoded и recursiveDecoded будут следующими:

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

Для имитации поведения jQuery.param() для версии ниже jQuery 1.4 необходимо утсановить параметр traditional в true:

var myObject = {
    a: {
        one: 1,
        two: 2,
        three: 3
    },
    b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);
alert(shallowEncoded);
alert(shallowDecoded);

 

Значения recursiveEncoded и recursiveDecoded будут следующими:

a=%5Bobject+Object%5D&b=1&b=2&b=3
a=[object+Object]&b=1&b=2&b=3 

Примеры

Пример: сериализация объекта (ассоциативного массива).

<!DOCTYPE html>
<html>
<head>
    <style>div { color:red; }</style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <div id="results"></div>
    <script>
        var params = { width:1680, height:1050 };
        var str = jQuery.param(params);
        $("#results").text(str);
    </script>
</body>
</html>

Результат должен быть:

width=1680&height=1050

Пример: Сериализация сложной структуры, для jQuery <= 1.3.2

alert( $.param({ a: [2,3,4] }) );
alert( $.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) );

результат:

"a=2&a=3&a=4"
"a=[object+Object]&d=3&d=4&d=[object+Object]"

Пример: Сериализация сложной структуры, для jQuery >= 1.4

alert( $.param({ a: [2,3,4] }) );
alert( $.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) );

результат:

"a[]=2&a[]=3&a[]=4"
"a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"