Сериализация форм в 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/ |
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 |
Так вам все таки форму нужно серриализовать, а не объект имеющийся, зачем же тогда 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>
Это все что нужно сделать. |
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>
|
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>
|
рони,
зачем? :) Поля нужно правильно именовать, и этого достаточно. ) |
laimas,
да согласен, но вдруг ТС любит погорячее :) |
Может быть, бог его знает, может все-таки поля эти надо в готовый объект встроить (как по сути вопроса сначала), и передача асинхронная... )
|
Цитата:
"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>
|
А вам для чего это нужно, передать на сервер или же...?
Если отправить эту форму как есть, то получите такой массив:
Array
(
[bublik] => Array
(
[0] => 1
[1] => 3
)
[bublik2] => 2
)
Серивализовав эту форму любым из методов jQury, и передав ее на сервер, получите ровно тоже самое. А вот если это формируется ради посмотреть, то все правильно, это и есть имя bublik[]. |
Цитата:
Нужно передать на сервер именно такой формат, классическим json. { "firstName": "Иван", "lastName": "Иванов", "address": { "streetAddress": "Московское ш., 101, кв.101", "city": "Ленинград", "postalCode": 101101 }, "phoneNumbers": [ "812 123-1234", "916 123-4567" ] } Передача должна быть строкой. в mime type - application/json. Чтобы парсер на стороне сервера реализованный на java ORACLE (не JS) смог его узнать. |
Ну тогда да, перебирать элементы формы как рони предложил, или тоже не подходит потому, что значение второго бублика тоже в массиве?
|
Цитата:
лишний перебор масива на стороне клиента -плоховато |
Ну а сервер на java может парсить строку GET параметров? Если да, то предавать так - $('form').serialize().
|
Цитата:
скорее всего просто будем оставлять в таком виде как выдаёт по умолчанию serializeArray(). И группировать одинаковые ключи с разными значениями уже на стороне сервера. Хотя это не самый удобный вариант. спасибо за участие |
Цитата:
|
https://github.com/marioizquierdo/jquery.serializeJSON - плагин JQuery
|
| Часовой пояс GMT +3, время: 06:55. |