Так AJAX AJAX и AJAX, это то, что мы делаем в эти дни широко. Это экономит время, добавляет динамики и дает вам ощущение использованием вид приложения чувства. Там ты много способов использовать AJAX со многими библиотеками. Но как вы можете видеть этот сайт для JQuery, мы будем смотреть на основной или, возможно, некоторые дополнительные обычаи AJAX.
Что вы нам нужны?
JQuery библиотеки (конечно же)
Крошечный PHP скрипт
Давайте заговорили. В JQuery, в основном существуют 6 типов способ сделать AJAX операции. Это
- $. AJAX (варианты)
- $. Get (URL-адрес, данные, вызов)
- $. GetJSON (URL-адрес, данные, вызов)
- $. GetScript (URL, вызов)
- нагрузки (URL-адрес, данные, вызов)
- $. Почте (адрес, данные обратного вызова
Наряду с номером 1, все другие методы использовать $. Ajax внутри. Таким образом, это означает, что $. AJAX () наша мать функции JQuery AJAX операции. Давайте посмотрим, как $. AJAX () выглядит следующим образом
$. AJAX ({ , типа: "POST", , адрес: "some.php" , данные: "имя = Питер и место = Нью-Йорк», ( msg ) { успех: функция (MSG) { "Server Response " + msg ) ; Alert ("Ответ сервера" + MSG); } });
Это очень его. Параметр типа занимает "GET" или "POST", который означает, что вы можете отправить AJAX requestion как POST или GET (Я предпочитаю всегда POST). Остальные параметры довольно понятны, если вы посмотрите на код еще раз.
Теперь мы собираемся сделать небольшой скрипт, который читает AJAX ссылка гиперссылки тэги (<a>) и загружает запрос на некоторые элементы DIV в документе.
Сначала мы берем нормальный HTML документа PHP который будет выглядеть следующим образом
<DOCTYPE HTML PUBLIC! "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <head> <title> Ajax ссылка тест </ title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"> </ SCRIPT> </ HEAD> <body> </ Body> </ html>
Теперь давайте добавим некоторые ссылки в документе. Для лучшего вида меню вид мы будем использовать UL> LI и Link. Это будет выглядеть следующим образом
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> нагрузки в раздел 1 </ A> </ LI> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> нагрузки в Раздел 2 </ A> </ LI> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> нагрузки в Раздел 3 </ A> </ LI> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> нагрузки в Раздел 4 </ A> </ LI> </ UL>
Как вы видите, мы поставили ссылки на список элементов внутри неупорядоченного списка объектов. Возьмем более близкий взгляд на свойства тега <a> в. У нас есть HREF, класс и относительной атрибут, который не выглядит отличается от обычной ссылки. Если вы видите, мы дали относительной атрибут некоторых дел имен именно div1, div2 .. так далее. Это означает, что мы хотим, чтобы реакция HREF должен быть загружен в эти дивы. Как это сделать? Давайте добавим эти дивы первой
<span> DIV 1 </ span> <div id="div1" class="content_loader"> </ div> <span> DIV 2 </ span> <div id="div2" class="content_loader"> </ div> <span> DIV -3 </ span> <div id="div3" class="content_loader"> </ div> <span> DIV 4 </ span> <div id="div4" class="content_loader"> </ div>
А реальная часть сейчас - мы дали ссылки класса "ajax_link". Мы только динамически добавлять Ajax действия только ссылки с именем класса под названием "ajax_link". Черт, мы не все ссылки на странице, чтобы Ajax действия, не так ли?
Так, в документе нагрузки мы сделаем это.
. ready ( function ( ) { $ (Документ). Готов (функция () { ) . click ( function ( ) { $ ("A.ajax_link"). Нажмите кнопку (функция () { this ) ; $ Current_link = $ (это); $. AJAX ({ , типа: "пост", ( "href" ) , адрес:. $ current_link Attr ("HREF"), ( e ) { успех: функция (е) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (". #" + $ Current_link Attr ("относительная")) HTML (е); } }); ; вернуться ложным; }); });
Позвольте мне объяснить, сценарий немного. Document.ready событие является событием, которое срабатывает при загрузке страницы. И тогда мы присвоении какой-то код на событие нажатия на ссылки, которые имеют класс "ajax_link". Делать это current_link $ = $ (это) позволяет иметь текущий объект ссылки будут доступны в функции обратного вызова. И у нас есть
$ ("#" + $ Current_link.attr ("относительная")). HTML (д)
, что означает $ ("div_id") HTML (server_response), и мы установили URL параметров функции $ Ajax динамически. URL:. $ current_link.attr ("HREF"). Так что теперь все эти средства "Все эти ссылки, которые имеют класс" ajax_link "- Добавьте обработчик событий щелчка - и затем выполняет AJAX запрос с ссылками HREF poperty и загружать ответ в DIV с идентификатором соответствует" REL "атрибут связать ". И возвращение ложных предотвращает связь работает как нормальная связь 
Хотите увидеть ее действие? Вот он идет.
И вы можете загрузить исходный , а также.
В следующем разделе этой небольшой статье мы будем использовать то же самое, но с немного комфорта.
Применение простой способ
Все остается почти такой же. Мы просто изменить метод Ajax здесь. Таким образом, вместо того чтобы писать все $. Ajax блок, мы можем достичь того же в следующем.
. ready ( function ( ) { $ (Документ). Готов (функция () { ) . click ( function ( ) { $ ("A.ajax_link"). Нажмите кнопку (функция () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (". #" + $ (Это) Attr ("относительная")) нагрузка ($ (это) Attr ("HREF").); ; вернуться ложным; }); });
Это намного меньше, сложнее, правда? Метод загрузки загружает Ajax содержание в элементе он присоединен. Если $ ("# somediv_id"). Нагрузки ("mypage.php"), он будет пытаться загрузить mypage.php "с содержанием в нем. Довольно просто, не правда ли? Но я предлагаю вам привыкнуть к основному методу (как показано в первой части).
В архива есть еще один файл с именем ajax2.php который демонстрирует эту methos который имеет тот же результат.
Итак, AJAX не так сложно, как кажется, не так ли? Когда вы становитесь очень свободно с операции AJAX, вы создадите магии.
Спасибо за чтение кстати.
Последние комментарии