Отправка данных в формате JSON с помощью JavaScript и jQuery

Владимир | | Ajax, JavaScript, PHP, Web разработка.

send json data

В прошлых статьях я рассказывал и приводил примеры получения и обработки данных в формате JSON на стороне клиента. Но примера отправки данных серверу в этом формате не было. Сегодня я попробую исправить это упущение.

Прежде всего, кратко напомню принцип передачи данных в JSON формате от сервера браузеру.

1) Серверный (PHP) скрипт формирует массив с данными, преобразует их в формат JSON (используется функция json_encode) и отправляет браузеру.

2) На стороне браузера JS скрипт обрабатывает полученные данные. Тут для преобразования данных используется eval.

То есть все преобразования данных сводятся к использованию двух функций.

Отправка данных серверу немного сложнее.

Прежде всего, нужно четко понимать, что отправить данные в формате JSON можно в параметрах запроса (GET или POST), т.е. точно также как и любые другие данные.

Т.к. формат JSON представляет собой обычную строку, то алгоритм отправки будет следующим.

1) Формируем JavaScript объект с данными, которые нужно отправить, например, со значениями, введенными пользователем в поля формы.

2) Преобразовываем этот объект в JSON формат.

3) Отправляем запрос серверу. В одном из параметров запроса передаем строку с JSON данными.

4) На стороне сервера читаем переданные данные (они придут в массиве $_GET или $_POST).

5) С помощью json_decode преобразуем JSON данные в массив.

Теперь рассмотрим небольшой пример.

Допустим, у нас есть страница с формой, которая содержит 2 поля: field1 и field2. Необходимо отправить эти данные в формате JSON серверному скрипту и прочитать его ответ.

Разметку формы я приводить не буду, она самая обычная и в конце статьи я дам ссылку на архив с примером.

Сразу перейдем к JavaScript коду.

$(function() {
	$("#myForm").submit(function() {
		var formData = {
			"field1":$("#field1").val()
			, "field2":$("#field2").val()
		};
		$.ajax({
			url:'dataparser.php'
			, type:'POST'
			, data:'jsonData=' + $.toJSON(formData)
			, success: function(res) {
				alert(res);
			}
		});
		return false;
	});
});

В этом примере я использовал библиотеку jQuery и плагин jquery-json. Этот плагин значительно упрощает преобразование данных в JSON формат, т.е. сводит всю работу к вызову одного метода $.toJSON(...).

Рассмотрим подробнее этот пример.

Прежде всего, мы назначили обработчик события submit для формы. Обратите внимание, что этот обработчик возвращает false (строка 15). Таким образом, мы предотвращаем отправку данных формы обычным способом.

В строках 3-6 мы формируем JavaScript объект и заполняем его введенными в форму данными.

Затем отправляем AJAX запрос (строка 7). В параметре url указываем название PHP скрипта, который выполняет обработку данных. В параметре type – способ передачи данных.

Третий параметр (data) самый интересный. Здесь указываем имя параметра, в котором будут отправлены данные (jsonData), и сами данные (преобразуем JavaScript объект в JSON строку с помощью $.toJSON).

После этого, в параметре success указываем функцию, которая будет обрабатывать полученные данные.

В результате серверу будет отправлен только один параметр

jsonData {«field1»: «111», «field2»: «222»}

Теперь рассмотрим серверный скрипт.

<?php
$data = json_decode($_POST['jsonData']);
$response = 'Получено параметров '.count($data).'\n';
foreach ($data as $key=>$value) {
    $response .= 'Параметр: '.$key.'; Значение: '.$value.'\n';
}
echo $response;
?>

Я решил его сделать максимально простым, т.е. опустил все возможные проверки.

Чтение и преобразование данных выполняется одной строчкой кода (строка 2). В результате получаем массив ($data) с данными формы.

После этого скрипт формирует строку с этими же данными и отправляет её назад браузеру.

Как видите, пример получился довольно простой.

Если хотите поэкспериментировать с этим примером, качайте архив.

Source

А если есть вопросы – пишите их в комментариях 😉

  • Владимир, такой вопрос: зачем это нужно? К чему эти все лишние операции, когда передавать можно через стандартные массивы? Где это может на практике использоваться, реально понадобиться?

    • adw0rd

      Какие именно тут лишние операции? На фронтенде или бекенде?

      Если на фронтенде, то это вызвано синтаксисом JQuery, он может показаться избыточным, но тем не менее он очень гибок в использовании и функционален.

      Если на фронтенде, то тут как раз ничего лишнего нет… Банальный вывод в поток данных.

      Json по сути только на фронтенде надо формировать, на бекенде это js-объекты.

      • Так а какие преимущества даёт этот способ?

        • да, по сути мой вопрос сводился именно к этому.

      • Лишние операции везде:
        на фронтенде — формирование json массива (+ использование дополнительного jQuery плагина)
        на бекенде — декодирование полученных данных.

        В чем «+», какие преимущества от этого всего?

        • Иван

          На сервере можно обойтись одной строкой — надо использовать библиотеки.
          На клиенте — я больше знаком с prototype, там это тоже делается одной строкой.
          Применение самое разное, но я чаще использую — сервер отдает json а яваскрипт обрабатывает и выводит, использую в custom контролах

    • Konstantin

      Добавлю, примеры, когда удобнее работать с JSON-ом. Допустим в вашем интерфейсе есть нестандартные элементы управления, например карта, на которой можно добавлять точки или выделять маршруты, или вы передаете на сервер результат сортировки элементов списка, или у вас есть грид ячейки которого можно редактировать.
      Формат очень гибкий и удобный, скорость работы с строками json_encode-decode в PHP нормальная. И еще с JSON-ом можно работать не стороне сервера не только на PHP, в NET 3.5 часть фреймворка, в JAVA тоже без проблемм. Ваш фронтэнд будет более гибкий.

      • Я попробую развить идею.
        Векторный online редактор. Координаты узлов кривых Безье можно сохранить в массиве и передавать его на сервер.
        В общем, везде, где нужно передавать многомерные массивы с данными удобнее JSON.

  • Владимир, такой вопрос: зачем это нужно? К чему эти все лишние операции, когда передавать можно через стандартные массивы? Где это может на практике использоваться, реально понадобиться?

    • adw0rd

      Какие именно тут лишние операции? На фронтенде или бекенде?

      Если на фронтенде, то это вызвано синтаксисом JQuery, он может показаться избыточным, но тем не менее он очень гибок в использовании и функционален.

      Если на фронтенде, то тут как раз ничего лишнего нет… Банальный вывод в поток данных.

      Json по сути только на фронтенде надо формировать, на бекенде это js-объекты.

      • Так а какие преимущества даёт этот способ?

        • да, по сути мой вопрос сводился именно к этому.

      • Лишние операции везде:
        на фронтенде — формирование json массива (+ использование дополнительного jQuery плагина)
        на бекенде — декодирование полученных данных.

        В чем «+», какие преимущества от этого всего?

        • Иван

          На сервере можно обойтись одной строкой — надо использовать библиотеки.
          На клиенте — я больше знаком с prototype, там это тоже делается одной строкой.
          Применение самое разное, но я чаще использую — сервер отдает json а яваскрипт обрабатывает и выводит, использую в custom контролах

    • Konstantin

      Добавлю, примеры, когда удобнее работать с JSON-ом. Допустим в вашем интерфейсе есть нестандартные элементы управления, например карта, на которой можно добавлять точки или выделять маршруты, или вы передаете на сервер результат сортировки элементов списка, или у вас есть грид ячейки которого можно редактировать.
      Формат очень гибкий и удобный, скорость работы с строками json_encode-decode в PHP нормальная. И еще с JSON-ом можно работать не стороне сервера не только на PHP, в NET 3.5 часть фреймворка, в JAVA тоже без проблемм. Ваш фронтэнд будет более гибкий.

      • Я попробую развить идею.
        Векторный online редактор. Координаты узлов кривых Безье можно сохранить в массиве и передавать его на сервер.
        В общем, везде, где нужно передавать многомерные массивы с данными удобнее JSON.

  • Чистяков Денис

    По моему для отправки целой формы удобнее применять метод serialize() или serializeArray() для отправки в виде JSON'a.
    И субъективно:

    data: {
    jsonData: $.toJSON(formData)
    }

    приятнее выглядит, и удобнее для применения, чем

    data:'jsonData=' + $.toJSON(formData)

    так можно послать любое колличество параметров на бекэнд.
    А что бы потом не задумываться пришел нам POST или GET применять $_REQUEST 😉

  • Чистяков Денис

    По моему для отправки целой формы удобнее применять метод serialize() или serializeArray() для отправки в виде JSON'a.
    И субъективно:

    data: {
    jsonData: $.toJSON(formData)
    }

    приятнее выглядит, и удобнее для применения, чем

    data:'jsonData=' + $.toJSON(formData)

    так можно послать любое колличество параметров на бекэнд.
    А что бы потом не задумываться пришел нам POST или GET применять $_REQUEST 😉

  • Я согласен, преимуществ этот метод не даёт, особенно если форма простая. И ситуаций когда приходилось бы им пользоваться у меня не возникало. Но недавно у меня спросили как это сделать и я решил опубликовать решение.

    Кроме того, есть реальные ситуации в которых этот метод может быть удобнее отправки формы обычным способом.

    Представьте, что есть форма в которой пользователь может менять количество поле и уровень их вложенности. Т.е. он создает структуру в виде дерева и заполняет ее данными. После этого отправляет её серверу.

    Если отправлять форму обычным способом, то придется передавать данные о родительских полях.
    А если сформировать на JS объект со всеми полями и отправить его в JSON формате, то на стороне сервера с помощью json_decode получим точно такой же объект.

    При этом сокращается количество кода на стороне сервера.

    2Чистяков Денис
    Большое спасибо за замечания, постараюсь учесть 😉

  • Я согласен, преимуществ этот метод не даёт, особенно если форма простая. И ситуаций когда приходилось бы им пользоваться у меня не возникало. Но недавно у меня спросили как это сделать и я решил опубликовать решение.

    Кроме того, есть реальные ситуации в которых этот метод может быть удобнее отправки формы обычным способом.

    Представьте, что есть форма в которой пользователь может менять количество поле и уровень их вложенности. Т.е. он создает структуру в виде дерева и заполняет ее данными. После этого отправляет её серверу.

    Если отправлять форму обычным способом, то придется передавать данные о родительских полях.
    А если сформировать на JS объект со всеми полями и отправить его в JSON формате, то на стороне сервера с помощью json_decode получим точно такой же объект.

    При этом сокращается количество кода на стороне сервера.

    2Чистяков Денис
    Большое спасибо за замечания, постараюсь учесть 😉

  • Эдуард

    Не понимаю, почему, если сжимать ответ сервера
    <?php
    ob_start("ob_gzhandler");
    , то уже ни $.get, ни $.getJSON обработать его немогут…

    • Проведите небольшой эксперимент. Посмотрите ответ сервера с помощью firebug. Если вы видите кракозябры — значит браузер не понимает, что он получает сжатый ответ, исправляется отправкой соответствующих заголовков.
      Если видите нормальные буквы, проверьте формат ответа.

      • Эдуард

        Дело оказалось не в заголовках — убрал подпись Юникод (BOM) и заработало.

        • Мне тоже один раз BOM попортил настроение. Я пробовал какой-то из редакторов и пересохранил в нём скрипт, использующий сессии. О том, что тот редактор сохраняет с BOM я не знал и сразуже получил ошибку. Возился часа два, пока до меня дошло в чем дело.

  • Эдуард

    Не понимаю, почему, если сжимать ответ сервера
    <?php
    ob_start("ob_gzhandler");
    , то уже ни $.get, ни $.getJSON обработать его немогут…

    • Проведите небольшой эксперимент. Посмотрите ответ сервера с помощью firebug. Если вы видите кракозябры — значит браузер не понимает, что он получает сжатый ответ, исправляется отправкой соответствующих заголовков.
      Если видите нормальные буквы, проверьте формат ответа.

      • Эдуард

        Дело оказалось не в заголовках — убрал подпись Юникод (BOM) и заработало.

        • Мне тоже один раз BOM попортил настроение. Я пробовал какой-то из редакторов и пересохранил в нём скрипт, использующий сессии. О том, что тот редактор сохраняет с BOM я не знал и сразуже получил ошибку. Возился часа два, пока до меня дошло в чем дело.

  • Артур

    Доброго времени. Почитал, разобрался, скачал пример, он не работает. Тестировался на сервере в инете, и на локальном сервере. Не распознается команда json_decode. А откуда вообще пхп скрипт может знать о такой функции?

  • Артур

    Доброго времени. Почитал, разобрался, скачал пример, он не работает. Тестировался на сервере в инете, и на локальном сервере. Не распознается команда json_decode. А откуда вообще пхп скрипт может знать о такой функции?

  • Александр

    Странно, но у меня пример тоже не работает.
    В alert'e выводит


    Warning: Invalid argument supplied for foreach() in dataparser.php on line 4
    Получено параметров 0n

    PHP 5.2.1
    Json включен и работает

    • Если не сложно, сделайте скриншот firebug'ом (это плагин к Firefox).
      Похоже данные почему-то не передаются.
      Я только что скачал архив и перепроверил, у меня все нормально работает.

  • Александр

    Странно, но у меня пример тоже не работает.
    В alert'e выводит


    Warning: Invalid argument supplied for foreach() in dataparser.php on line 4
    Получено параметров 0\n

    PHP 5.2.1
    Json включен и работает

    • Если не сложно, сделайте скриншот firebug'ом (это плагин к Firefox).
      Похоже данные почему-то не передаются.
      Я только что скачал архив и перепроверил, у меня все нормально работает.

  • Александр

    да что такое
    не отправить сообщение со ссылкой
    pic ipicture ru/uploads/091025/mUW2HyTNIy.png

    • Прошу прощения, я не объяснил, на что хотел взглянуть.
      Нужен скриншот вкладки Console, после отправки формы с развернутой вкладкой post
      Примерно так
      http://screencast.com/t/H7LwZPm4LH

      • Александр

        pic ipicture ru/uploads/091027/3IZuNfgPyl.png
        менял register_globals на On — не помогло..

        Спасибо, что помогаете )

        • Александр

          json_decode проверял
          скрипт
          print_r(json_decode('[0,1]'));
          выдаёт
          Array ( [0] => 0 [1] => 1 )

        • Эдуард

          Ага, тоже сталкивался с этой ошибкой
          json_decode — возвращает mixed
          foreach (array_expression as $value)- работает с массивом

          foreach works only on arrays, and will issue an error when you try to use it on a variable with a different data type or an uninitialized variable

          Используйте приведение типов.

  • Александр

    да что такое
    не отправить сообщение со ссылкой
    pic ipicture ru/uploads/091025/mUW2HyTNIy.png

    • Прошу прощения, я не объяснил, на что хотел взглянуть.
      Нужен скриншот вкладки Console, после отправки формы с развернутой вкладкой post
      Примерно так
      http://screencast.com/t/H7LwZPm4LH

      • Александр

        pic ipicture ru/uploads/091027/3IZuNfgPyl.png
        менял register_globals на On — не помогло..

        Спасибо, что помогаете )

        • Александр

          json_decode проверял
          скрипт
          print_r(json_decode('[0,1]'));
          выдаёт
          Array ( [0] => 0 [1] => 1 )

        • Эдуард

          Ага, тоже сталкивался с этой ошибкой
          json_decode — возвращает mixed
          foreach (array_expression as $value)- работает с массивом

          foreach works only on arrays, and will issue an error when you try to use it on a variable with a different data type or an uninitialized variable

          Используйте приведение типов.

  • Александр

    У меня в данном конкретном случае ничего не возвращает
    if (isset ($_POST["jsonData"])) {
    $post = $_POST["jsonData"];
    }
    //$post = {"field1": "asd", "field2": "asd"}
    $data = json_decode ($post);
    echo gettype($post); //выводит NULL

    • Эдуард


      $data = (array) json_decode(stripslashes($_POST["jsonData"]));

      • Александр

        Не обновлял страницу и не увидел Ваше сообщение
        Спасибо!

  • Александр

    У меня в данном конкретном случае ничего не возвращает
    if (isset ($_POST["jsonData"])) {
    $post = $_POST["jsonData"];
    }
    //$post = {\"field1\": \"asd\", \"field2\": \"asd\"}
    $data = json_decode ($post);
    echo gettype($post); //выводит NULL

    • Эдуард


      $data = (array) json_decode(stripslashes($_POST["jsonData"]));

      • Александр

        Не обновлял страницу и не увидел Ваше сообщение
        Спасибо!

  • Александр

    Всё, готово!
    Огромное спасибо Эдуарду!

    С костылями файл dataparser.php получился такой:
    $value) {
    $response .= "Параметр: ".$key."; Значение: ".$value."n";
    }
    echo $response;
    ?>

  • Александр

    Всё, готово!
    Огромное спасибо Эдуарду!

    С костылями файл dataparser.php получился такой:
    $value) {
    $response .= "Параметр: ".$key."; Значение: ".$value."\n";
    }
    echo $response;
    ?>

  • Александр

    Всё, готово!
    Огромное спасибо Эдуарду!

    С костылями файл dataparser.php получился такой:
    $value) {
    $response .= «Параметр: «.$key.»; Значение: «.$value.»n»;
    }
    echo $response;
    ?>

  • Александр

    Всё, готово!
    Огромное спасибо Эдуарду!

    С костылями файл dataparser.php получился такой:
    $value) {
    $response .= «Параметр: «.$key.»; Значение: «.$value.»\n»;
    }
    echo $response;
    ?>

  • Александр

    pastebin.com/f1d6fe319
    парсер ) ай-яй )

  • Александр

    pastebin.com/f1d6fe319
    парсер ) ай-яй )

  • dhj

    Все кто говорит что это лишнее кодирование ( см. первые посты) — на самом деле это самый простой и универсальный способ передавать структуры данных из любого фронтэнда к любому бекэнду. Гораздо проще передать один объект в формате json чем кучу пар «ключ-значение» которые потом надо еще как-то собрать воедино.
    PS: на этот пост набрел случайно — нужен был плагин для кодирование в json, желательно к jQuery. Саму статью не читал, так как все что там написано — достаточно просто, а вот комментарии — удивили.

    • Можно вопрос? Что должен делать плагин, который вы хотите найти? Преобразовать из хеша в json можно с помощью метода toJSON. А формирование самого хеша с данными — вопрос интересный. Сделать универсальный вариант с которым было бы удобно всем работать довольно сложно, но написать что-нибудь такое для себя — идея очень интересная.

  • dhj

    Все кто говорит что это лишнее кодирование ( см. первые посты) — на самом деле это самый простой и универсальный способ передавать структуры данных из любого фронтэнда к любому бекэнду. Гораздо проще передать один объект в формате json чем кучу пар «ключ-значение» которые потом надо еще как-то собрать воедино.
    PS: на этот пост набрел случайно — нужен был плагин для кодирование в json, желательно к jQuery. Саму статью не читал, так как все что там написано — достаточно просто, а вот комментарии — удивили.

    • Можно вопрос? Что должен делать плагин, который вы хотите найти? Преобразовать из хеша в json можно с помощью метода toJSON. А формирование самого хеша с данными — вопрос интересный. Сделать универсальный вариант с которым было бы удобно всем работать довольно сложно, но написать что-нибудь такое для себя — идея очень интересная.

  • dhjj

    Вот как раз этот плагин и взял — мне в общем-то подошел. В боевом проекте используем jsHttpRequest от Дмитрия Котерова, а для себя искал что-нибудь попроще. По поводу формирования данных — все зависит от приложения — это личное дело каждого, все равно в бекэнде получишь нетипизированный объект или массив — но с ними гораздо проще работать, чем напрямую с GET или POST параметрами.

  • dhjj

    Вот как раз этот плагин и взял — мне в общем-то подошел. В боевом проекте используем jsHttpRequest от Дмитрия Котерова, а для себя искал что-нибудь попроще. По поводу формирования данных — все зависит от приложения — это личное дело каждого, все равно в бекэнде получишь нетипизированный объект или массив — но с ними гораздо проще работать, чем напрямую с GET или POST параметрами.

  • Castro

    Чуть верю в жизнь не потерял, думал что-то с кешем.
    В файле лежит 3 функции вызова $.getJSON('getjson.php', {}, function(json){ ….
    Получается, что они выполняются не в том порядке, в котором лежат и а первыой выполяется та, в которой данных меньше и отрабатывает быстрее.
    Как сделать так, чтобы каждая следующи ajax вызов выполнялся после того, как отработает предыдущая функция?

    • Вызывать следующую в обработчике ответа предыдущей.
      $.getJSON('getjson.php', {}, function(json){
      $.getJSON('getjson2.php', {}, function(json) {
      $.getJSON('getjson3.php', {}, function(json) {});
      });
      });
      Как-то так.

  • Castro

    Чуть верю в жизнь не потерял, думал что-то с кешем.
    В файле лежит 3 функции вызова $.getJSON('getjson.php', {}, function(json){ ….
    Получается, что они выполняются не в том порядке, в котором лежат и а первыой выполяется та, в которой данных меньше и отрабатывает быстрее.
    Как сделать так, чтобы каждая следующи ajax вызов выполнялся после того, как отработает предыдущая функция?

    • Вызывать следующую в обработчике ответа предыдущей.

      $.getJSON('getjson.php', {}, function(json){
          $.getJSON('getjson2.php', {}, function(json) {
              $.getJSON('getjson3.php', {}, function(json) {});
          });
      });

      Как-то так.

  • Всем привет.
    Вопрос. Когда передаю в свой же файл на своем же сервере все отлично передается
    jsonData{«username»: «123», «password»: «123», «request_type»: «123»}

    Как только пытаюсь передать на сторонний сервер
    FireBug пишет уже не POST а OPTIONS json.

    http://kiwi-sms.ru/json/

    Подскажите если не сложно что делать.

    • У меня FF этот запрос вообще не отправляет 🙂 И, по-идее, так и должно быть. Дело в том, что кросс-доменные (XSS) запросы запрещены разработчиками браузера (это часть политики безопасности). Т.е. вы можете отправить запрос только на тот сервер, с которого был загружен скрипт.

      У меня было 3 поста на эту тему.
      Как обойти запрет на XSS
      XSS и Same Origin Policy
      XSS с использованием JSONP и jQuery

      Надеюсь, они вам помогут. Если будут вопросы или замечания, пишите, обсудим!

      • Castro

        Если я не ошибаюсь то там или писать прокси на каком-то из языков программирования либо JSONP c колбеком

  • Всем привет.
    Вопрос. Когда передаю в свой же файл на своем же сервере все отлично передается
    jsonData{«username»: «123», «password»: «123», «request_type»: «123»}

    Как только пытаюсь передать на сторонний сервер
    FireBug пишет уже не POST а OPTIONS json.

    http://kiwi-sms.ru/json/

    Подскажите если не сложно что делать.

    • У меня FF этот запрос вообще не отправляет 🙂 И, по-идее, так и должно быть. Дело в том, что кросс-доменные (XSS) запросы запрещены разработчиками браузера (это часть политики безопасности). Т.е. вы можете отправить запрос только на тот сервер, с которого был загружен скрипт.

      У меня было 3 поста на эту тему.
      Как обойти запрет на XSS
      XSS и Same Origin Policy
      XSS с использованием JSONP и jQuery

      Надеюсь, они вам помогут. Если будут вопросы или замечания, пишите, обсудим!

      • Castro

        Если я не ошибаюсь то там или писать прокси на каком-то из языков программирования либо JSONP c колбеком

  • Владимир спасибо! Буду пробовать!

  • Владимир спасибо! Буду пробовать!

  • гость

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

    $(function() {
    $("#myForm").submit(function() {
    uls=document.getElementsByTagName("a");
    for(i=0;i<uls.length-1;i++){
    itema = uls.item(i);
    var atts = itema.attributes;
    att = atts.item(atts.length-1);
    a = itema.firstChild;
    if(a.nodeValue==0)
    {l="undefined"}
    else{l=a.nodeValue}
    var formData={
    "link":att.nodeValue,
    "name":l
    };

    $.ajax({
    url:'data.php'
    , type:'POST'
    ,data:'jsonData='+$.toJSON(formData)
    , success: function(res) {
    alert(res);
    }
    });
    }
    });
    });

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

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

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

    • AJAX запросы отправляются для каждой ссылки потому что вы его отправляете внутри цикла в котором обрабатываете найденные ссылки.

      Можно изменить так:

      var uls = $('a[rel="nofollow"]');
      var urls_arr = [];
      $.each(uls, function(key, link) {
      urls_arr.push({'link':link.attr('href'),'text':link.html()});
      });
      $.ajax({
      url:'data.php'
      , type:'POST'
      ,data:'jsonData='+$.toJSON(urls_arr)
      , success: function(res) {
      alert(res);
      }
      });

      Сразу предупреждаю, код я не тестировал, возможно где-то ошибся, но, надеюсь, общую идею вы уловили 😉

      • Ruslan Voroschuk

        Спасибо за пост, Владимир, очень кстати в освоении json.

        Помогите, пожалуйста, разобраться почему, когда я явно указываю тип данных dataType: 'json', Ваш пример не работает
        $.ajax({
        url:'selected.php'
        , type:'POST'
        , dataType: 'json' // !!!
        , data:'jsonData=' + $.toJSON(thing)
        , error: function() { alert(«Internal AJAX error occured!»); }
        , success: function(res) {
        alert(res);
        }
        });

        Спасибо!

        • Параметр dataType указывает тип данных, которые вы ожидаете ОТ сервера. Т.е. это данные которые формирует php скрипт. В моем примере он возвращает обычную строку. В json формате php скрипт ПОЛУЧАЕТ данные. Поэтому и ошибка возникает.

        • KaZiK

          Владимир, помогите разобраться JSON.

          Я взял за основу ваш пример, заменил урл куда идет запрос,
          подставил свои данные. Добавил для дебага алерты для ошибки и
          при успешном запросе.

          отсылаю запрос — пишет ок. но на самом ничего не происходит.

          можете подробно описать(дать линк) какие параметры нужно обязательно указывать и какие типы данных должны быть.

          п.с.
          суть операции — послать запрос на сервер, для «вручения» юзеру бэджа. Надо ли знать какая функция это осуществляет? Или мы просто шлем JSON «пакет» и все?

        • >> Или мы просто шлем JSON «пакет» и все?

          Так не бывает 🙂
          Вы должны точно знать какие параметры нужны вашему серверному скрипту и как они используются.

          Я не могу ответить какие параметры вам нужны, т.к. не знаю как работает ваш серверный скрипт.

        • KaZiK

          Какие параметры нужны я знаю.
          В Fiddler я посылаю JSON строку на нужный урл и сервер реагирует как надо. А вот со своей страницы не выходит.
          Грешу на XSS и пытаюсь выбрать правильный метод его обойти.

          В любом случае спасибо за хорошие статьи по теме 🙂
          Будем учиться дальше.

        • Но вы же можете сравнить JSON строку, которую отправляет Fiddler со строкой, которую отправляет браузер (ее можно посмотреть с помощью firebug). Проблему с XSS firebug тоже покажет.

  • Mawome Maksi

    првоапрашп

  • Иван

    Спасибо, помогло разобраться.

  • Roe

    Здравствуйте, Александр!
    на странице index.php есть большая форма, где имеются серии каскадных выпадающих списков. Нужно аяксом  с селекта на селект передавать id для sql. Возможно ли получить id в переменную с помощью json? например: $_POST['id']
    Не силен в js.. но делать нужно.
    у меня посреди браузера выскакивает вертикальный лист информации о странице. где я вижу результат.
    Но в самой странице не могу отобразить например echo $_POST['field1'].
    Буду благодарен за подсказку.

    •  У вас id один и тот же для всех селектов? Входят ли селекты в одну форму?
      Может просто сохранить id в скрытом поле?

      • Roe

        Владимир, прошу прощение, опечатался в инициалах..
        по вопросу:
        селекты: страна-регион-город. Все ID — разные.
        Все выполняется в одном скрипте.
        Да, это одна форма.
        Как можно решить эту задачу?
        Спасибо!

        • Насколько я понял, вы хотите:
          1) После выбора страны — подгрузить с помощью ajax список регионов.
          2) После выбора региона — подгрузить список городов.
          3) После выбора города — отправить все содержимое формы на сервер.
          Правильно?

          В этом случае вам не нужно передавать id между селектами. Выполнение первых двух пунктов требует передачи только id соответствующего селекта. А при отправке всей формы целиком, все id в любом случае будут переданы на сервер.

        • Roe

           Владимир, по трем пунктам, совершенно верно.
          по поводу «В этом случае вам не нужно передавать id между селектами.» не очень точно понял суть, но — я нашел как мне кажется очень удачный подход, правда без реализации mysql, что и хотел реализовать в жизнь.

          http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/

        • В одном из предыдущих комментариев у вас была фраза: «передавать id между селектами». Насколько я понял, вы хотите передать id одного селекта другому с помощью JS. Это делать не обязательно, т.к. id нужен на сервере и его вы отправите в любом случае.

    • Alex

       У меня проблемка данные передаются крякозяблами.
      Передавать в кодировке cp1251 нельзя?
      В ином случае и сама страница и заголовки php в крякозяблах если ставить utf BOM хоть с BOM хоть без

      • Нет, нельзя. В AJAX запросе данные будут передаваться только в UTF-8.
        Если нет возможности перевести проект на UTF-8, то используйте mb_convert_encoding или iconv.

  • Verdim

    Добрый день !!!
    Народ подобрался грамотный и заинтересованный.
    Поэтому вопрос такой. Внутри моей формы находится в двух div для возможности «крутиться» таблице, формируемой динамически на основе данных из базы. Таблица содержит checkbox, состояние которых мне надо обработать. На примере в начале статьи я сформировал свой код. Но происходит странная вещь: при нажатии на submit изображение формы пропадает с экрана, а затем все возвращается в исходное состояние.
    Что-б было более понятно с конструкцией:

     
       
         
          …
          ………………………………..
       
     

    Не подскажете в чем я не прав. Еще раз повторяю:
    программный код практически идентичен коду примера.
    Спасибо.

  • Verdim

    Совсем забыл добавить:
    размер кода внутри таблицы очень большой, — ключ его 4-х-значный, поэтому эти два tr повторяются в цикле по количеству записей в базе.
    Каждый checkbox имеет свой индивидуальный идентификатор.

    • Судя по описанию ошибки:
      «при нажатии на submit изображение формы пропадает с экрана, а затем все возвращается в исходное состояние»
      страница просто перезагружается.
      Обычно такое происходит если возникает ошибка при выполнении JS кода и не отрабатывает
      returm false; (15-ая строка в первом листинге)
      и форма отправляет обычным post запросом.

      Чтобы проверить установите firebug и посмотрите в консоле какие ошибки возникают. Дальше отладчиком смотрите как выполняется код.

  • mono

    Скажите, я один такой испорченный, что мне в изображении, прикрепленном к статье померещилась какуля
    PS: статью не читал @ плагин скачал, спасибо

  • АКмалжон

    а как получить от сервера ответа в виде массива…

    например есть форм для проверка свободности логина…
    логина с помошью жсон передаем обработчику а ответа получить как переменная с значением.. можно ли так.. если можно как сделать в обработчике чтоб ответ так получилось $data['status'] = «zanyat»;

    • Можно.

      Для этого на стороне сервера формируете массив с данными, которые хотите передать и преобразовываете его в строку с помощью json_encode.

      Браузер получит эту строку и вы сможете преобразовать её в JS объект с помощью JSON.parse.

  • Olexandr Samograi

    Здраствуйте, как проверить получил ли сервер мои данные

    $(«#callback»).submit(function() {

    var formData = {

    «name»:$(«#name»).val()

    , «Age»:$(«#Age»).val()

    };

    $.ajax({

    url:'http://worldchats.net/wc/go'

    , type:'POST'

    , data: {

    jsonData: $.toJSON(formData)

    }

    });

    return false;

    });

    • Открывайте инструменты веб мастера в chrome или firebug для firefox и смотрите вкладку Сеть (network). У вас должен появится новый запрос. Если этого не произошло, значит проблема в JS коде, т.е. на стороне браузера. Если запрос появился, то выбираете его и открываете вкладку response — в ней будет ответ сервера.

      • Olexandr Samograi

        Спасибо, разобралса 😉