Подробно

jQuery урок 9

Вдогонку к предыдущему уроку, небольшая модификация, по результатам окончания AJAX-запроса, мы получаем некие данные (в данном случае All done! из php-файла) и убираем “нотифаер”: мол “шёл запрос”, но теперь - уже результат известен. На месте надписи “Идёт AJAX-запрос” - может быть и анимированный гиф, например (как это обычно сейчас принято).

Теперь код:

$(document).ready(function() {
 $("div#dynamic").load("my.php",
    function () { $("#sho").hide();});
});

html

<h2>Пример номер 9</h2>
<div id="sho">Идёт AJAX-запрос...</div>
<div id="dynamic"></div>

Ну и ссылка, на работающий пример. По-моему проще простого? Ага?

Subscribe to the comments for this post

JQuery, урок номер 8

Давненько я не брал в руки шашки…

Итак, собственно, основное предназначение, ради чего народ возится со всевозможными JavaScript-овыми библиотеками - AJAX взаимодействие с сервером. Т.е. в сегодняшнем примере, мы будем не просто втыкивать в div-ы подготовленный в яваскрипте код, а будем этот код получать из php-файла…

Яваскрипт выглядит таким образом:

$(document).ready(function() {
  $("div#dynamic").load("hello.php",{name:"Vlad"});
  $("div#calculator").load("calc.php",{first:"98"});
});

Объясняю: с левой частью функций всё понятно? Там указано “куда” всё это дело будет выводится. Далее следует load-функция, где указано файл, который работает (hello.php & calc.php) ну и переменные, которые мы передаём скрипту - одна будет называться $name, другая - $first…

html-код выглядит так:

<h2>Пример номер 8</h2>
<div id="dynamic"></div>
<h2>И подверсия</h2>
<div id="calculator"></div>

сами php файлы:

echo "Превед, " . $name . "!";

и, соответственно:

echo "Квадрат " . $first  . " будет равен: " . $first*$first;

По-моему не просто, а ОЧЕНЬ просто.

Разумеется, в реальной жизни надо будет на время работы скрипта “включать” прелоадер (традиционную, крутящуюся картинку “змейку” какую-нить), а затем - отключать, ну а сам скрипт может не просто отображать полученные переменные, но и, например, делать запросы в базу данных, или отправлять почту. Ну короче говоря - всё что хочешь, всё будет делать, что сможет скрипт - и с другой стороны, что сможете напрограммировать

Чуть не забыл, ссылочка на действующий пример.

Subscribe to the comments for this post

Wordpress is… 2

Продолжение не заставило себя долго ждать…

Так сказать, продолжая тему…

Subscribe to the comments for this post