Форум Сайтостроение Веб-строительство

Парсинг данных формы в JS

O
На сайте с 29.05.2008
Offline
195
ortegas
3521

Здравствуйте.

Пишу AJAX метод отправки форм. Написал говнокодом, но теперь задача сделать все в стиле ООП.

Итак, например, есть стандартная форма:

<form>

<input name="name1">

<input name="name2">

</form>

Мне нужно с помощью JS, универсально(!) подготовить массив вида arr[input.attr("name")] = input.val();

Т.е., чтобы на выходе получился [name1 = "то что записано в первом поле", name2 = "...во втором"].

С помощью $.map() выходит добавить в массив только что-то одно (либо значения, либо именно), но никак не ассоциативный массив. Пока что единственное решение создавать JSON строку, а потом искусственно ее распарсить в массив с помощью метода $.ParseJSON();, но это не совсем правильно и не совсем красиво.

Помогите :) .

bay_ebook
На сайте с 28.05.2010
Offline
111
bay_ebook
#1 


var data = $('#idForm').serialize();

$.ajax({

        url: 'myUrl.html',

        type: "POST",

        dataType : "json",

        cache: false,

        data: (data),

        beforeSend : function(){

            $('#sendReturnMessage').html('Обработка, ждите');

        },

        erorre: function(){

            $('#sendReturnMessage').html('Возникла ошибка, попробуйте еще');

        },

        success: function (data){

            $('#sendReturnMessage').html(data.text);

        }

    });
Нужен прогер на php+mysql+понимание чужего кода? (/ru/forum/540660) Вам сюда PHP-шаман (http://php-shaman.pw/)
O
На сайте с 29.05.2008
Offline
195
ortegas
#2

А к каким объектам можно применять serialize? А то у меня 1 форма на все. А отсылать нужно участки. Наверное стоит делать для каждой группы инпутов отдельную форму?

И еще data: (data) не отсылается. Сам пробовал такую конструкцию, но отсылается только в случае data: {data: data}. Какие могут быть причины?

DiAksID
На сайте с 02.08.2008
Offline
218
DiAksID
#3

биндим на форму что то вроде этого: 


..........

		submit:function(e){

			e.preventDefault();

			var $$=$(this),d={};

			$$.find('input,select,textarea').each(function(){

				d[this.name]=this.value;

			});

			$.ajax({

				type:'post',

				url:$$.attr('action'),

				data:d,

				timeout:$$.attr('data-timeout') || 30000,

				success:function(d){

					return ...;

				},

				error:function(){

					return ...;

				}

			});

		}

..........

100% рабочее решение...

show must go on !!!...
bay_ebook
На сайте с 28.05.2010
Offline
111
bay_ebook
#4
ortegas:
А к каким объектам можно применять serialize? А то у меня 1 форма на все. А отсылать нужно участки. Наверное стоит делать для каждой группы инпутов отдельную форму?

да просто назначь форме id


var data = $('#idForm').serialize();


<form id="idForm">
<input>
</form>

И сериалайз заберет все значения которые есть в форме (инпуты, селекты и тд)

ortegas:

И еще data: (data) не отсылается. Сам пробовал такую конструкцию, но отсылается только в случае data: {data: data}. Какие могут быть причины?

Если забрать сериалайзом - отправится. Сериалайз сам формирует ({data:value, data2:value2}) - из значений формы

DiAksID
На сайте с 02.08.2008
Offline
218
DiAksID
#5
bay_ebook:
... Сериалайз сам формирует ({data:value, data2:value2}) - из значений формы

??? http://api.jquery.com/serialize/ :


The .serialize() method creates a text string in standard URL-encoded notation
...
This produces a standard-looking query string:
a=1&b=2&c=3&d=4&e=5
bay_ebook
На сайте с 28.05.2010
Offline
111
bay_ebook
#6
DiAksID:
??? http://api.jquery.com/serialize/ :


The .serialize() method creates a text string in standard URL-encoded notation
...
This produces a standard-looking query string:
a=1&b=2&c=3&d=4&e=5

Я знаю, как сериалайз формирует данные. Я для ТС расписал так, что бы было немного понятнее ему. Если его счас нагрузить еще и формирование и склеиванием данных -боюсь он ничего не поймет.

сериалайз


$(this).serialize()
// a=1&b=2&c=3&d=4&e=5

и простой набор руками


({a:1,b:2,c:3})

На сервере приводит к одному и тому же эффекту


$_POST['a'] == 1;
$_POST['b'] == 2;
и тд

Фактически для этого (что бы в ручную колеса не делать) сериалайз и существует.

А

string in standard URL-encoded notation

означает, что она безопасна для передачи как гет так и пост запросов

DiAksID
На сайте с 02.08.2008
Offline
218
DiAksID
#7
bay_ebook:
Я знаю, как сериалайз формирует данные. Я для ТС расписал так, что бы было немного понятнее ему. Если его счас нагрузить еще и формирование и склеиванием данных -боюсь он ничего не поймет.

что мешало писать не о $.serialize(), а о $.serializeArray() :


The .serializeArray() method creates a JavaScript array of objects,
ready to be encoded as a JSON string.
It operates on a jQuery object representing a set of form elements.

и не вводить ТС в заблуждение ?

O
На сайте с 29.05.2008
Offline
195
ortegas
#8

Спасибо, уже решил так:

$("button[value=" + action + "]" + (id ? "[id=" + id + "]" : "")).click(function() {
$("#" + window.page).submit(function(event) {
//Встановлюємо action
window[action] = {"action": action};

//Парсимо значення всіх input, textarea, select
$(this).find("input[type=text]").each(function(){
window[action][this.name]=this.value;
});

//Встановлюємо перший знайдений id элемента, що редагуємо, якщо є
(id = $(this).find("input.id:first").attr("name")) ? window[action].id = id : "" ;

$.ajax({
data: (window[action]),
success: function(result) {
$("tr:has(input[name=" + window.edit.id + "])").children("td:not(:has(input[type=checkbox]))").each(function() {
if ($(this).children("input").attr("name") == 'drug') {
$(this).replaceWith('<td class="' + $(this).children("input").attr("name") + '"><a href="/index.php?major=health&minor=drugs&drug=' + result['id'] + '">' + result[$(this).children("input").attr("name")] + '</a>');
}
else {
$(this).replaceWith('<td class="' + $(this).children("input").attr("name") + '">' + result[$(this).children("input").attr("name")]);
}
});
//Видаляємо діалогове вікно
$(".dialog-right." + (id ? id : action)).remove();
$("button[value=" + action + "]" + (id ? "[id=" + id + "]" : "")).unbind();
}
});
});

Serialize не подошел по двум причинам: 1. одна форма, а внутри таблица (т.е. к tbody форму уже не добавить), 2. нужно проверять значения input перед отправкой.

bay_ebook
На сайте с 28.05.2010
Offline
111
bay_ebook
#9
DiAksID:
что мешало писать не о $.serialize(), а о $.serializeArray() : 


The .serializeArray() method creates a JavaScript array of objects,

ready to be encoded as a JSON string.

It operates on a jQuery object representing a set of form elements.


и не вводить ТС в заблуждение явной ошибкой в коде?

Ну вот и зачем ТС на сервере json расспарсивать еще, не хватит $_POST массива?

ПС - в коде никакой ошибки, использую постоянно, никаких ошибок.

O
На сайте с 29.05.2008
Offline
195
ortegas
#10

bay_ebook, да, ваш вариант тоже работает. У меня просто обработчик искал обязательное ключ action в массиве, а его serialize не спарсил из value кнопки.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий