<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Ajax запросы с помощью методов $.post() и $.get().

Ajax запросы с помощью методов $.post() и $.get().

В прошлой статье мы рассмотрели, как отправлять асинхронные запросы на JQuery с помощью метода $.Ajax(), а в этой я покажу ещё два способа.

В качестве примера возьмём всё тот же server.php, который будет складывать 2 числа и возвращать нам их сумму.

$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>

Теперь напишем наш скрипт

$(document).ready(function(){
  $("#submit").click(function(){
   var fnumb = $("#a").val();
   var snumb = $("#b").val();
   $.post('server.php', {a:fnumb,b:snumb}, function(data){
    $("#block").text(data);
    });
   });
});

Как можно видеть, код стал немного короче, чем был в прошлой статье, потому что $.post() это ни что иное, как сокращённая форма метода $.Ajax() с запросом типа POST.

Первым параметров мы передаём строку, содержащую название нашего сервера, вторым параметром мы передаём объект, где указываем название переменной, которую отправляем и её значение через двоеточие, третьим параметром идёт анонимная функция, принимающая данные от сервера. В теле функции мы, как и в прошлой статье, вставили полученный результат в div с id=block.

Если вы хотите отправить запрос типа GET, то просто измените название метода с $.post() на $.get(), а параметры у него идентичные.

$(document).ready(function(){
  $("#submit").click(function(){
   var fnumb = $("#a").val();
   var snumb = $("#b").val();
   $.get('server.php', {a:fnumb,b:snumb}, function(data){
    $("#block").text(data);
   });
  });
});

Только не забудьте изменить также и наш сервер!

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

kgm96.1996 kgm96.1996 05.08.2014 22:10:14

здравствуйте! а как в скрипт приведённый в статье вписать сопровождающие функции ? типа (ajaxError)

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 08.10.2014 20:11:56

Здравствуйте! А как сделать так чтобы было поле с набранными данными на нем. Потом нажимаем Добавить и добавляется новое поле с этим значением.

Ответить

charly666 charly666 27.11.2014 06:35:20

Здраствуйте! У меня такой вопрос: на сайте есть папка /ajax/ и /js/ в папке ajax находятся php обработчики ajax запросов, а в /js/ js скрипты. Так вот я помещаю фаил .htaccess в котором deny from all, в папку с обработчиками и ajax запросы перестают работать, вопрос: как тогда закрыть прямой доступ к содержимому папки?

Ответить

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