JQuery: Ajax. Как реализовать передачу нескольких параметров в data?

Question

[Вячеслав Лебедев]

Добрый день!
Вот html:

<form class="ajaxForm">
          Введите имя:<br/>
          <input class="ajaxUsername" type="text" size="20">
          <input class="ajaxData" type="hidden" value="test.php">
          <input type="submit" value="Отправить">
        </form>
        <div class="ajaxContent"></div>

А вот JQuery:

$(document).ready(function() {
            $('.ajaxForm').submit(function() {
              $.ajax({
                type: 'POST',
                url: $('.ajaxData').val(),
// Как в data, передать несколько параметров? Возможно ли такое?
                data: 'ajaxUsername=' + $('.ajaxUsername').val(), 
                success: function(html) {
                  $('.ajaxContent').html(html);
                }
              });
              return false;
            });

Comments

[masthack]

А как быть с передачей по AJAX куска HTML кода и дополнительной переменной?
в данный момент реализовал передачу только HTML кода:

$.ajax({
	url:"fetch_comment.php", //файл генерит комментарии из MYSQL
	method:"POST",
	data:page_id, //page_id объявлен ранее
	dataType:"TEXT", //использую тип TEXT
	success:function(fetch_comment){
		$('#display_comment').html(fetch_comment); //получаю большой кусок HTML кода со всеми комментариями
	}
})

есть желание в этом же запросе в отдельной переменной получить переменную, показывающую количество комментариев. Попробовал засунуть в массив весь HTML плюс переменную и использовать тип JSON - массив ломается, данные не приходят.
1. Кусок HTML кода возможно без потерь положить в массив?
2. Лучше положить переменную в сам HTML в и потом выковыривать ее после получения?

Answer 1

[NewMax]

Итог вышесказанного:

$('form').submit(function(){
    // сериализация всех полей формы
    var data = $(this).serialize();
    // ручное добавление в виде массива
    var data = {name:'name', 'email':email};
    // ручное добавление для хардкорщиков. Не нужно так делать
    var data = 'name='+name+'&email='+email;
    //сформированные тем или иным способом данные можно передавать в $.ajax
    $.ajax({
        url: 'url',
        data: data
        ...
    });
})

Comments

[Вячеслав Лебедев]

Огромное спасибо за развернутый ответ!
А как пользоваться этим массивом в php обработчике?

Через $arr = $_REQUEST['data']; он не отдает мне ничего.
И print_r($arr); - тоже. Так же простой echo $arr, ничего не дает.

Кстати, передаваемые данные вылазят в адресную строку...
Хотя прописал type: 'POST'.

Вызов alert(data); в самом скипте, выдает мне строку, но не массив, такой же, который вылазит в адресную строку.

Помогите и с этим разобраться. :)

[NewMax]

Если type:'post', то попробуйте проверить массив $_POST.
Там будет не $_POST['data'], а $_POST['username'] или еще что. Но нужно для input в форме указать атрибут name. Именно его нужно будет искать в переданном массиве.

То есть, если у вас есть
<input type="text" name="testname">

То в полученном массиве нужно будет проверять
$_POST['testname']

[Вячеслав Лебедев]

Точно, а ведь так и логичнее. Все заработало как надо.
Один нюанс, как все таки передать через ajax массив, так как бывают случаи, когда я не знаю какие точно переменные приходят из html. Как нибудь реализовать такое хочется у себя в проекте. :)
В любом случае Спасибо за помощь!

[NewMax]

Можно получить данные в виде массива, если имена полей сделать как data[name]

<input type="text" name="data[username]">
<input type="text" name="data[email]">

Тогда на стороне php будет примерно так:

$arr = $_POST['data'];
foreach($arr as $key => $value)
{
  //$key - ваше название поля, в данном случае username и email
  //$value - значение поля
}

[Вячеслав Лебедев]

Хитро. Спасибо еще раз :)

Answer 2

[1001001 111]

data: { par1: par1, par2: par2}
в общем использовать обычный массив

Answer 3

[Vadim Bogomazov]

Serialize?

Comments

[Александр]

а что если нужно передать serialize и какую-нибудь еще переменную?

Answer 4

[Сергей Николаевич]

$('.ajaxForm').submit(function() {
     $.post( $(this).attr('action'), $(this).serializeArray(), function(html) {
          $('.ajaxContent').html(html);
          }
});

Answer 5

[Olya Pilipenko]

data: data,
data - JSON