Передача многомерного массива через jQuery.ajax()

Posted Пнд, 06/29/2009 - 23:07 by Gairon

Допустим имеется страница с формой через которую пользователь может добавить информацию об игре - название, ссылку на картинку и ссылку на страницу игры. Блоки для добавления игры можно создавать динамически, т.е. пользователь сразу может заполнить информацию о нескольких играх. Как сразу отправить все заполненные пользователем формы, чтобы на сервере было удобно их потом использовать?
Вариант решения для отправки многомерного массива из браузера клиента через jQuesy.ajax():

  1. var games = $('.game');
  2. var data;
  3.  
  4. data = new Object();
  5. for (i = 0; i < games.length; i++) {  
  6.     data['games[' + i + '][name]'] = $(games[i]).find('.game-name').val();
  7.     data['games[' + i + '][img]']  = $(games[i]).find('.game-img').val();
  8.     data['games[' + i + '][url]']  = $(games[i]).find('.game-url').val();
  9. }
  10.  
  11. $.ajax({            
  12.     url: 'games.php',
  13.     type: "POST",
  14.     data: data
  15. });

Далее на сервере обрабатываем массив полученных игр:

  1. foreach($_POST['games'] as $id => $game) {
  2.     ]]>echo]]> "I get game #" . $i . $game['name'];    
  3.     ...
  4. }

Комментарии

by Гость - 04/11/2010 - 23:54

Огромное спасибо за данное решение, красиво, изящно!

by ryrogliri - 07/07/2011 - 23:11

Очень полезная штука

by Гость - 01/16/2011 - 18:35

Ребята спасайте! Я не очень то разбираюсь во всем этом, но мне очень очень нужна помощь. Мне нужно найти все теги <a> на странице,отправить на сервер ссылку и ее название, и на сервере сохранить все это в базу. Вот что в данный момент у меня есть:

  1. 		$(function() {
  2.             $("#myForm").submit(function() {
  3. 			  uls=document.getElementsByTagName("a");
  4. 				for(i=0;i<uls.length-1;i++){
  5. 					 itema = uls.item(i);
  6. 					  var atts = itema.attributes;
  7. 					  att = atts.item(atts.length-1);
  8. 					  a = itema.firstChild;
  9. 					  if(a.nodeValue==0)
  10. 			  {l="undefined"}
  11. 			  else{l=a.nodeValue}
  12. 			  var formData={
  13. 				  "link":att.nodeValue,
  14. 				  "name":l
  15. 				  };
  16.  
  17.               $.ajax({
  18.             url:'data.php'
  19.             , type:'POST'
  20. 			,data:'jsonData='+$.toJSON(formData)
  21.             , success: function(res) {
  22.                 alert(res);
  23.             }
  24.         });
  25. 	}
  26.     });
  27. });

а вот data.php который принимает значения 

  1. $data = (]]>array]]>) json_decode(]]>stripslashes]]>($_POST["jsonData"]));
  2. $response = 'Получено параметров '.]]>count]]>($data)."\n ";
  3. foreach ($data as $key=>$value) {
  4.   $response .= 'Параметр '.$key.';Значение '.$value."\n ";
  5. }
  6. ]]>echo]]> $response;

Проблема заключается в том что я вызываю $.ajax стоько раз сколько найдено тегов <a>, но это даже мне, мало что понимающей, кажется не правильным. Как мне передать все данные одним запросом???
Очень надеюсь на помощь

by Gairon - 01/20/2011 - 16:59

Сейчас времени нет всё написать подробнее, но коль вы пользуетесь jQuery надо пользоваться по полной:

JS код:

  1. var anchers = {};
  2. // передавать в пост можно только одномерный массив, 
  3. // поэтому извращаемся с вот таким описанием данных
  4. $('a').each(function (i) {
  5.     anchers['anchers[' + i + '][href]'] = this.href;
  6.     anchers['anchers[' + i + '][text]'] = this.text;
  7. });
  8.  
  9. // посылаем всё на сервер
  10. $.ajax({
  11.     url:'/test.php',
  12.     type:'POST',
  13.     data: anchers,
  14.     success: function(res) {
  15.         alert(res);
  16.     }
  17. })

Код сервера:

  1. <?php
  2. ]]>print_r]]>($_POST);

Ответ сервера:

  1. ]]>Array]]>
  2. (
  3.     [anchers] => ]]>Array]]>
  4.         (
  5.             [0] => ]]>Array]]>
  6.                 (
  7.                     [href] => http://galanov.net/admin/settings/devel
  8.                     [text] => Devel module
  9.                 )
  10.             [1] => ]]>Array]]>
  11.                 (
  12.                     [href] => http://galanov.net/admin/settings/devel
  13.                     [text] => Devel settings
  14.                 )
  15.             [2] => ]]>Array]]>
  16.                 (
  17.                     [href] => http://galanov.net/devel/cache/clear?destination=node%2F6
  18.                     [text] => ]]>Empty]]> cache
  19.                 )
  20.             [3] => ]]>Array]]>
  21.                 (
  22.                     [href] => http://galanov.net/devel/devel_themer?destination=node%2F6
  23.                     [text] => Enable Theme developer
  24.                 )
  25.             [4] => ]]>Array]]>
  26.                 (
  27.                     [href] => http://galanov.net/devel/php
  28.                     [text] => Execute PHP Code
  29.                 )
  30.         )
  31. )

Дальше уже доводите до ума код сервера - foreach вам в руки :)

by Гость - 09/05/2011 - 02:40

Большое спасибо за статью! не один час потратил, чтобы сделать подобную вещь))

by Гость - 10/22/2011 - 17:59

Спасибо! Помог, просто супер!

by Гость - 02/17/2012 - 15:06

Большое спасибо! Сделал массив как нужно.

by Гость - 10/15/2012 - 16:19

Красиво получилось, и без преобразования в json. Именно то что надо, с возможностью сохранения индекса. Сначала хотел сделать через json, но плагины, на подобие "jquery-json", индексы не учитывают; в предложенном способе - сохраняются.

by Гость - 02/26/2013 - 13:11

спасибо БОЛЬШОЕ!!!! весь нет перелковырял... и только здесь нормально все описано!

by Гость - 07/29/2013 - 17:21

var games = $('.game');
var data;

for (i = 0; i < games.length; i++) {
data = new Object();//здесь нельзя писать ето. Обєкт надо создавать перед циклом!

data['games[' + i + '][name]'] = $(games[i]).find('.game-name').val();
data['games[' + i + '][img]'] = $(games[i]).find('.game-img').val();
data['games[' + i + '][url]'] = $(games[i]).find('.game-url').val();
}

$.ajax({
url: 'games.php',
type: "POST",
data: data
});

by Гость - 03/12/2014 - 19:35

Уважаемый автор статьи, нашел этот блог и решение более чем понравилось.
Однако оно не работает у меня.
Клиент:
var data; //= new Object();
for (var i = 0; i < 2; i++) {
data['games[' + i + '][name]'] = "n"+i;
data['games[' + i + '][img]'] = "im"+i;
data['games[' + i + '][url]'] = "u"+i;
}
и сервер:
foreach($_POST['games'] as $id=>$game) {
//echo "I get game #".$key.$value['name'];
}
выдает ошибку:Invalid argument supplied for foreach()
для строки foreach($_POST['games'] as $id=>$game) {

C чем это связанно? В каком направлении смотреть ? Заранее благодарю за помошь.
Я новичек, так что не судите строго=)

by Гость - 03/14/2014 - 19:24

Решение нашел:
дело было в undefined значении переменных которые передавал в массиве javascript.
поставил переменную блокирующую присвоение значений для data(до передачи массива) с условием if(nidPt[i]===undefined)
{
NALmasProf=1;
break;
}

by Гость - 04/07/2014 - 14:59

Идея уйти от json мне понравилась. а можно написать поподробней, ну прям с примером. Чтобы запустить, проверить и самому поковыряться (в целях самообразования). А то мне как новичку не понятно как сохранять, где php а где js

by Гость - 06/16/2015 - 16:34

Автору огромное спасибо, выручил, полдня убил на поиски решения. Спасибо!!!!!

Отправить комментарий

  • Доступны HTML теги: <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

  • Search Engines will index and follow ONLY links to allowed domains.

Подробнее о форматировании

Введите решение задачи