Как стать автором
Обновить

Получаем Object из формы

Время на прочтение3 мин
Количество просмотров13K

Задача


При помощи javascript'а получить объект, содержащий данные формы. Набор полей и свойств должен задаваться разметкой формы. Зачем — чтоб из этого объекта получить json, xml, да и мало ли еще применений можно найти.

Решение


Берем тут: code.google.com/p/form2js github.com/maxatwork/form2js

Использование


Структура получившегося объекта берется из атрибута name. Нотация схожа c Castle.Monorail и ASP.Mvc.
Да, в примерах ниже видно что то, похожее на JSON. Так вот, библиотека не сериализует в JSON. В примере для сериализации была использована библиотека www.json.org/js.html.
Результат работы — объект Javascript (его можно получить, сделав eval приведенных ниже строк), содержащий данные формы, не строка. Очевидно, из этого объекта можно получить его JSON-представление, но это не основная задача библиотеки.

Объекты/вложенные объекты

  1. <input type="text" name="person.name.first" value="John" />
  2. <input type="text" name="person.name.last" value="Doe" />
* This source code was highlighted with Source Code Highlighter.


на выходе даст

  1. {
  2.  "person" :
  3.  {
  4.   "name" :
  5.   {
  6.    "first" : "John",
  7.    "last" : "Doe"
  8.   }
  9.  }
  10. }
* This source code was highlighted with Source Code Highlighter.


Массивы

  1. <label><input type="checkbox" name="person.favFood[]" value="steak" checked="checked" /> Steak</label>
  2. <label><input type="checkbox" name="person.favFood[]" value="pizza"/> Pizza</label>
  3. <label><input type="checkbox" name="person.favFood[]" value="chicken" checked="checked" /> Chicken</label>
* This source code was highlighted with Source Code Highlighter.


на выходе даст

  1. {
  2.  "person" :
  3.  {
  4.   "favFood" : [ "steak", "chicken" ]
  5.  }
  6. }
* This source code was highlighted with Source Code Highlighter.


Массивы объектов

  1. <dl>
  2.  <dt>Give us your five friends' names and emails</dt>
  3.   <dd>
  4.    <label>Email <input type="text" name="person.friends[0].email" value="agent.smith@example.com" /></label>
  5.    <label>Name <input type="text" name="person.friends[0].name" value="Smith Agent"/></label>
  6.   </dd>
  7.   <dd>
  8.    <label>Email <input type="text" name="person.friends[1].email" value="n3o@example.com" /></label>
  9.    <label>Name <input type="text" name="person.friends[1].name" value="Thomas A. Anderson" /></label>
  10.   </dd>
  11.  </dt>
  12. </dl>
* This source code was highlighted with Source Code Highlighter.


на выходе даст

  1. {
  2.  "person" :
  3.  {
  4.   "friends" : [
  5.    { "email" : "agent.smith@example.com", "name" : "Smith Agent" },
  6.    { "email" : "n3o@example.com", "name" : "Thomas A. Anderson" }
  7.   ]
  8.  }
  9. }
* This source code was highlighted with Source Code Highlighter.


Отличие от .serializeArray() в jQuery


Очень популярный вопрос.
.serializeArray() сделает из примера с массивом объектов вот такой объект:
  1. [
  2.  { "person.friends[0].email" : "agent.smith@example.com" },
  3.  { "person.friends[0].name" : "Smith Agent" },
  4.  { "person.friends[1].email" : "n3o@example.com" },
  5.  { "person.friends[1].name" : "Thomas A. Anderson" }
  6. ]
* This source code was highlighted with Source Code Highlighter.


Разница очевидна.

Заключение


Кому нужно — пользуйте (MIT), ну и багов наверняка полно, в зависимости от свободного времени буду править.

UPD: Залил исходники в hg. Заодно пример работы можно тут посмотреть: form2js.googlecode.com/hg/example/test.html
Теги:
Хабы:
Всего голосов 59: ↑49 и ↓10+39
Комментарии46

Публикации

Истории

Работа

Ближайшие события

Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
OTUS CONF: GameDev
Дата30 мая
Время19:00 – 20:30
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область