<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Отправка асинхронных запросов на JQuery.

Отправка асинхронных запросов на JQuery.

Всем привет! Сегодня мы разберём важную тему, а именно как отправлять AJAX запросы на JQuery.

Если вы используете на своём сайте библиотеку JQuery, то вам больше не нужно писать огромный код, чтобы отправить запрос AJAX, а потом ещё беспокоится о кроссбраузерности, потому что библиотека сделает всё за вас! Давайте сразу перейдём к практике. Пример возьмём самый банальный: отправляем 2 числа на сервер, а он возвращает нам их сумму.

Для начала напишем наш простой сервер server.php

$a = $_POST['a'];
$b = $_POST['b'];
echo $a+$b;

Теперь перейдём к HTML

<html>
<head>
 <title>JQuery AJAX</title>
 <meta charset="utf-8">
 <script src="jquery.js"></script>
 <script src="main.js"></script>
</head>
<body>
  <input type="text" id="a">
  <input type="text" id="b">
  <button id="submit">Отправить!</button>
  <div id="block"></div>
</body>
</html>

HTML до безобразия прост: 2 текcтовых поля, блок, куда будут выведены данные с сервера и кнопка для отправки данных.

Теперь перейдём к нашему файлу main.js, где и напишем наш скрипт.

$(document).ready(function() {
$("#submit").click(function() {
  var fnumb = $("#a").val();
  var snumb = $("#b").val();
  alert(fnumb + " : " + snumb);
  });
});

Вот, что у нас пока получилось. Когда документ полностью загружен, мы вешаем на нашу кнопку событие клик, в котором отбираем значения с полей функцией val(). Чтобы проверить, что у нас всё правильно, выведем эти значения функцией alert(). Обязательно проверьте меня, вдруг ошибся ;)

Что ж, когда вы убедились, что всё сработало нормально, перейдём к следующему этапу: отправке асинхронного запроса

$(document).ready(function() {
  $("#submit").click(function() {
   var fnumb = $("#a").val();
   var snumb = $("#b").val();
   $.ajax({
    url: "server.php",
    type: "POST",
    dataType: "text",
    data: ("a="+fnumb+"&b="+snumb),
    success: function(data){
     $("#block").text(data);
    }
    });
   });
});

Итак, разберём, что мы тут сделали. Мы вызвали метод ajax объекта jquery и передали туда объект со свойствами. Что же эти свойства значат?

  • url - адрес сервера, куда отправятся данные
  • type - метод запроса. По-умолчанию GET
  • dataType - тип данных, которые мы планируем получить от сервера. Может быть: text, html, script, xml, json, jsonp
  • data - это собственно данные, которые мы хотим отправить серверу. Заметьте, что параметры разделяются знаком &
  • success - в случае успеха, вызываем анонимную функцию, в которую придут данные. А в теле фунции просто вставляем их в блок div

Вот и всё. Теперь, если вы введёте 2 числа в тектовые поля и нажмёте кнопку "отправить", то получите сумму этих чисел без перезагрузки страницы. Конечно, параметров больше, и мы разобрали далеко не всё, но вы получили базу, используя которую уже можно сделать классные вещи! Если вы испытываете трудности с пониманием данной статьи, то посмотрите бесплатный курс по JavaScript, JQuery и Ajax

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (6):

wanderer wanderer 11.04.2014 09:33:15

Михаил, а почему когда я указываю динамические имена переменных так: data: ("dinamic_perem1"+fnumb+"&dinamic_perem2"+snumb), То этот код не передает ничего в php ? хотя в консоли не выдает никаких ошибок!

Ответить

php_programmer php_programmer 11.04.2014 15:21:11

А где знак равно? ("dinamic_perem1="+fnumb+"&dinamic_perem2="+snumb)

Ответить

wanderer wanderer 11.04.2014 22:18:44

Не важно. Тут забыл написать. а вообще когда передаю динамические названия переменных чтобы потом их в php распарсить, ничерта не приходит=(

Ответить

php_programmer php_programmer 11.04.2014 22:46:20

Отправьте Ваш вопрос в службу поддержки и приложите код, который не работает.

Ответить

admin27 admin27 11.04.2014 16:57:10

Михаил, на сайте серьезная проблема!!! Когда пользователь попадает на сайт из Яндекса, то вместо страницы со статьей появляется страница с ошибкой! Fatal error: Call to undefined method MainController::isContainsQuery() in /home/myrusakov.ru/www/controllers/controller_class.php on line 153 И сайт теряет позиции в Яндексе. Можете проверить

Ответить

Engine Engine 15.09.2014 23:05:07

Здравствуйте. Написал свой движек, теперь хочу полностью его перевести на ajax. С навигацией по сайту решил проблему. Теперь проблема с формами, а точнее с PHP обработкой ошибок. Ошибки (если есть) записываются в сессию и с помощью header производится переход обратно к форме и в шапке вывод ошибок. Так вот. Меня смущает работа ajax и header(). Получается, кто быстрее отработает, тот и победил :) Как то можно исправить конфликт? В сторону плагинов не смотрю, хочу сам написать скрипт

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.