Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.06.2015, 06:33
Аспирант
Отправить личное сообщение для Dtri Посмотреть профиль Найти все сообщения от Dtri
 
Регистрация: 14.12.2014
Сообщений: 86

Сериализация форм в json
Здравствуйте!

Есть метод serialize(), который собирает с формы все значения и упаковывает в строку формата x1=y1&x2=y2....

Есть ли метод наподобии serialize, который будет упаковывать в строку формата json. в таком виде:


{
"firstName": "Иван",
"lastName": "Иванов",
"address": {
"streetAddress": "Московское ш., 101, кв.101",
"city": "Ленинград",
"postalCode": 101101
},
"phoneNumbers": [
"812 123-1234",
"916 123-4567"
]
}


это случайно не serializeArray()???

но как используя этот метод сделать вложенность json в json как показано в примере

"address": {
"streetAddress": "Московское ш., 101, кв.101",
"city": "Ленинград",
"postalCode": 101101
}

тут json adress вложен в общий json/
Ответить с цитированием
  #2 (permalink)  
Старый 02.06.2015, 07:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

serializeArray() также работает с формой, а объект в json формат - JSON.stringify()
Ответить с цитированием
  #3 (permalink)  
Старый 02.06.2015, 08:07
Аспирант
Отправить личное сообщение для Dtri Посмотреть профиль Найти все сообщения от Dtri
 
Регистрация: 14.12.2014
Сообщений: 86

Сообщение от laimas Посмотреть сообщение
serializeArray() также работает с формой, а объект в json формат - JSON.stringify()
<head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>


        <form action="json.txt">
            <input type="text" name="bublik" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik" value="3">

        </form>
        <button type="submit" class="a_submit">Submit</button>
        <div class="wrapper"></div>
        <script>
            $('.a_submit').on('click', function (form) {
                form.preventDefault();
                $('.wrapper').html(JSON.stringify($(this).prev('form').serializeArray()));
            });
        </script>
    </body>


ответ выдаёт такого вида:

[{"name":"bublik","value":"1"},{"name":"bublik2","v alue":"2"},{"name":"bublik","value":"3"}]

Есть ли способ Придать этому вид
{
"bublik": [1,3],
"bublik2":2
}

не парся то что получилось и не перебирая массив. Возможно есть какие-то параметры у этого метода?

хотелось бы чтобы оно группировало значения инпутов с одинаковыми name

Последний раз редактировалось Dtri, 02.06.2015 в 08:15.
Ответить с цитированием
  #4 (permalink)  
Старый 02.06.2015, 08:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Так вам все таки форму нужно серриализовать, а не объект имеющийся, зачем же тогда JSON.stringify.

А чтобы получилось так:

"bublik": [1,3],
"bublik2":2

нужно колдовать не с html структурой формы, а соответственно именовать ее поля. Одно и тоже имя нельзя задавать полям, иначе сервер получит значение последнего из этих полей (массив не может иметь дубликаты ключей).
<form action="json.txt">
            <input type="text" name="bublik[]" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik[]" value="3">
        </form>

Это все что нужно сделать.
Ответить с цитированием
  #5 (permalink)  
Старый 02.06.2015, 08:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Dtri,
<head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>


        <form action="json.txt">
            <input type="text" name="bublik" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik" value="3">

        </form>
        <button type="submit" class="a_submit">Submit</button>
        <div class="wrapper"></div>
        <script>
            $('.a_submit').on('click', function (form) {
                form.preventDefault();
                var arr = $(this).prev('form').serializeArray(), obj = {};
                $.each(arr, function(indx, el){
                      obj[el.name] ? obj[el.name].push(el.value) : (obj[el.name] = [el.value]);
                      });
                $('.wrapper').html(JSON.stringify(obj));
            });
        </script>
    </body>
Ответить с цитированием
  #6 (permalink)  
Старый 02.06.2015, 08:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Dtri,
или так
<head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>


        <form action="json.txt">
            <input type="text" name="bublik" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik" value="3">

        </form>
        <button type="submit" class="a_submit">Submit</button>
        <div class="wrapper"></div>
        <script>
            $('.a_submit').on('click', function (form) {
                form.preventDefault();
                var arr = $("form input"), obj = {};
                $.each(arr, function(indx, el){
                      obj[el.name] ? obj[el.name].push(el.value) : (obj[el.name] = [el.value]);
                      });
                $('.wrapper').html(JSON.stringify(obj));
            });
        </script>
    </body>
Ответить с цитированием
  #7 (permalink)  
Старый 02.06.2015, 08:33
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

рони,
зачем?
Поля нужно правильно именовать, и этого достаточно. )
Ответить с цитированием
  #8 (permalink)  
Старый 02.06.2015, 08:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

laimas,
да согласен, но вдруг ТС любит погорячее
Ответить с цитированием
  #9 (permalink)  
Старый 02.06.2015, 08:42
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Может быть, бог его знает, может все-таки поля эти надо в готовый объект встроить (как по сути вопроса сначала), и передача асинхронная... )
Ответить с цитированием
  #10 (permalink)  
Старый 02.06.2015, 09:00
Аспирант
Отправить личное сообщение для Dtri Посмотреть профиль Найти все сообщения от Dtri
 
Регистрация: 14.12.2014
Сообщений: 86

Сообщение от laimas Посмотреть сообщение
Так вам все таки форму нужно серриализовать, а не объект имеющийся, зачем же тогда JSON.stringify.

А чтобы получилось так:

"bublik": [1,3],
"bublik2":2

нужно колдовать не с html структурой формы, а соответственно именовать ее поля. Одно и тоже имя нельзя задавать полям, иначе сервер получит значение последнего из этих полей (массив не может иметь дубликаты ключей).
<form action="json.txt">
            <input type="text" name="bublik[]" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik[]" value="3">
        </form>

Это все что нужно сделать.
из вашего примера не выходит такой вид:


"bublik": [1,3],
"bublik2":2


вот что получается:

[{"name":"bublik[]","value":"1"},{"name":"bublik2","value":"2"},{"na me":"bublik[]","value":"3"}]


<head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>


        <form action="json.txt">
            <input type="text" name="bublik[]" value="1">
            <input type="text" name="bublik2" value="2">
            <input type="text" name="bublik[]" value="3">
        </form>
        <button type="submit" class="a_submit">Submit</button>
        <div class="wrapper"></div>
        <script>
            $('.a_submit').on('click', function (form) {
                form.preventDefault();
                $('.wrapper').html(JSON.stringify($(this).prev('form').serializeArray()));
            });
        </script>
    </body>

Последний раз редактировалось Dtri, 02.06.2015 в 09:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
БД JSON вывод через jQuery Infinity178 jQuery 13 09.03.2015 21:32
Не могу распарсить JSON. gorenie jQuery 3 29.11.2013 22:26
Проблемы с jqGrid и JSON massacra_panda Библиотеки/Тулкиты/Фреймворки 1 08.10.2012 16:44
JSON или JSONP для запросов на другой сервер? Метод GET, для длинных сообщений? Kotakota jQuery 5 23.08.2011 23:12
jQuery. Обработка ошибок и JSON. mma_mma jQuery 3 19.07.2010 12:10