Отправка GET и POST запросов с помощью jQuery

jQuery для начинающих

Отправка GET и POST запросов с помощью jQuery

Сообщение Александр » 17 июн 2011, 11:06

Отправка GET и POST запросов с помощью jQuery

В этом уроке показано как отправлять get и post запросы с помощью javascript (jquery) и как получать и обрабатывать ответ в формате json.

  1. <html>
  2. <head>
  3. <title>jquery get post</title>
  4. <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  5. <script type="text/javascript">
  6. $(function(){
  7.  
  8. // отправка get запроса без параметров
  9. $('#get_btn').click(function() {
  10.     $.get('http://flapps.ru/apps/test/addlink.php',
  11.         function(data){
  12.             if (data.success) {
  13.                 $('#result').html(data.success.msg);
  14.             } else {
  15.                 $('#result').html(data.error.msg);
  16.             }
  17.         }, "json");
  18.     return false;
  19. });
  20.  
  21. // отправка get запроса с передачей параметров
  22. $('#get2_btn').click(function() {
  23.     $.get('http://flapps.ru/apps/test/addlink.php?link=http://flapps.ru&title=Форум',
  24.         function(data){
  25.             if (data.success) {
  26.                 $('#result').html(data.success.msg);
  27.             } else {
  28.                 $('#result').html(data.error.msg);
  29.             }
  30.         }, "json");
  31.     return false;
  32. });
  33.  
  34.  
  35. // отправка post запроса с передачей параметров
  36. $('#post_btn').click(function() {
  37.     $.post('http://flapps.ru/apps/test/addlink.php', {"url": 'http://flapps.ru', "title": 'Форум'},
  38.         function(data){
  39.             if (data.success) {
  40.                 $('#result').html(data.success.msg);
  41.             } else {
  42.                 $('#result').html(data.error.msg);
  43.             }
  44.         }, "json");
  45.     return false;
  46. });
  47.  
  48.  
  49. });
  50. </script>
  51. </head>
  52. <body>
  53. <a href="#" id="get_btn">get без параметров</a><br />
  54. <a href="#" id="get2_btn">get с параметрами</a><br />
  55. <a href="#" id="post_btn">post с параметрами</a><br />
  56. <div id="result"></div>
  57. <a href="http://flapps.ru">http://flapps.ru</a>
  58. </body>
  59. </html>


Скрипт addlink.php должен возвращать данные в формате json.
  1. // просто выводим сообщение
  2. echo '{"success":
  3.                 {
  4.                 "msg":"Всё прошло успешно!"
  5.                 }
  6.                 }';
  7.  
  8. // сообщение с ошибкой
  9. echo '{"error":
  10.                 {
  11.                 "msg":"Произошла ошибка!"
  12.                 }
  13.                 }';

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


Если нужно просто подгрузить данные, то можно использовать GET запрос.
Если нужно отправить какие-то данные на сервер, то лучше использовать POST запрос. POST запрос позволяет передавать данные большего объёма, при этом данные не кэшируются.


Чтобы увидеть разницу между запросами и отлавливать ошибки в процессе взаимодействия с сервером, прочтите урок Отладка приложений, взаимодействующих с сервером (Charles).

За это сообщение автора Александр поблагодарили - 2:
T710MA, ukhov
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Отправка GET и POST запросов с помощью jQuery

Сообщение ukhov » 17 июн 2011, 11:06

Вот это хорошая тема.
Изображение
Аватара пользователя
ukhov
Модератор
Модератор
 
Сообщения: 1343
Зарегистрирован: 04 янв 2011, 21:19
Откуда: Санкт-Петербург
Благодарил (а): 85 раз.
Поблагодарили: 155 раз.

Re: Отправка GET и POST запросов с помощью jQuery

Сообщение Foxmen » 23 янв 2012, 14:36

а как картинку можно отправить ?
Foxmen

 
Сообщения: 80
Зарегистрирован: 03 сен 2010, 19:58
Благодарил (а): 4 раз.
Поблагодарили: 2 раз.

Re: Отправка GET и POST запросов с помощью jQuery

Сообщение Александр » 23 янв 2012, 21:33

Foxmen
Поищи плагины "jquery file upload"
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Отправка GET и POST запросов с помощью jQuery

Сообщение artemis » 13 апр 2012, 04:16

Александр,
а если гугл ругается на знак $ при включенной библиотеке?
artemis

 
Сообщения: 6
Зарегистрирован: 11 апр 2012, 07:54
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Отправка GET и POST запросов с помощью jQuery

Сообщение Александр » 16 апр 2012, 20:45

artemis
Как ругается? Другие библиотеки используешь?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Отправка GET и POST запросов с помощью jQuery

Сообщение T710MA » 23 май 2012, 22:16

Какая максимальная длина строки JSON?
T710MA

 
Сообщения: 22
Зарегистрирован: 16 май 2012, 17:30
Благодарил (а): 16 раз.
Поблагодарили: 4 раз.

Re: Отправка GET и POST запросов с помощью jQuery

Сообщение alexei » 23 май 2012, 22:26

T710MA писал(а):Какая максимальная длина строки JSON?

Сколько памяти хватит.
http://appslessons.com/ — Мой блог посвященный урокам приложений ВКонтакте
Аватара пользователя
alexei
Разработчик
Разработчик
 
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44
Откуда: Rostov-on-Don
Благодарил (а): 5 раз.
Поблагодарили: 54 раз.


Вернуться в Уроки jQuery



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron