Задача
При помощи javascript'а получить объект, содержащий данные формы. Набор полей и свойств должен задаваться разметкой формы. Зачем — чтоб из этого объекта получить json, xml, да и мало ли еще применений можно найти.
Решение
Берем тут:
Использование
Структура получившегося объекта берется из атрибута name. Нотация схожа c Castle.Monorail и ASP.Mvc.
Да, в примерах ниже видно что то, похожее на JSON. Так вот, библиотека не сериализует в JSON. В примере для сериализации была использована библиотека www.json.org/js.html.
Результат работы — объект Javascript (его можно получить, сделав
eval
приведенных ниже строк), содержащий данные формы, не строка. Очевидно, из этого объекта можно получить его JSON-представление, но это не основная задача библиотеки.Объекты/вложенные объекты
- <input type="text" name="person.name.first" value="John" />
- <input type="text" name="person.name.last" value="Doe" />
* This source code was highlighted with Source Code Highlighter.
на выходе даст
- {
- "person" :
- {
- "name" :
- {
- "first" : "John",
- "last" : "Doe"
- }
- }
- }
* This source code was highlighted with Source Code Highlighter.
Массивы
- <label><input type="checkbox" name="person.favFood[]" value="steak" checked="checked" /> Steak</label>
- <label><input type="checkbox" name="person.favFood[]" value="pizza"/> Pizza</label>
- <label><input type="checkbox" name="person.favFood[]" value="chicken" checked="checked" /> Chicken</label>
* This source code was highlighted with Source Code Highlighter.
на выходе даст
- {
- "person" :
- {
- "favFood" : [ "steak", "chicken" ]
- }
- }
* This source code was highlighted with Source Code Highlighter.
Массивы объектов
- <dl>
- <dt>Give us your five friends' names and emails</dt>
- <dd>
- <label>Email <input type="text" name="person.friends[0].email" value="agent.smith@example.com" /></label>
- <label>Name <input type="text" name="person.friends[0].name" value="Smith Agent"/></label>
- </dd>
- <dd>
- <label>Email <input type="text" name="person.friends[1].email" value="n3o@example.com" /></label>
- <label>Name <input type="text" name="person.friends[1].name" value="Thomas A. Anderson" /></label>
- </dd>
- </dt>
- </dl>
* This source code was highlighted with Source Code Highlighter.
на выходе даст
- {
- "person" :
- {
- "friends" : [
- { "email" : "agent.smith@example.com", "name" : "Smith Agent" },
- { "email" : "n3o@example.com", "name" : "Thomas A. Anderson" }
- ]
- }
- }
* This source code was highlighted with Source Code Highlighter.
Отличие от .serializeArray() в jQuery
Очень популярный вопрос.
.serializeArray()
сделает из примера с массивом объектов вот такой объект:
- [
- { "person.friends[0].email" : "agent.smith@example.com" },
- { "person.friends[0].name" : "Smith Agent" },
- { "person.friends[1].email" : "n3o@example.com" },
- { "person.friends[1].name" : "Thomas A. Anderson" }
- ]
* This source code was highlighted with Source Code Highlighter.
Разница очевидна.
Заключение
Кому нужно — пользуйте (MIT), ну и багов наверняка полно, в зависимости от свободного времени буду править.
UPD: Залил исходники в hg. Заодно пример работы можно тут посмотреть: form2js.googlecode.com/hg/example/test.html