Так AJAX AJAX и AJAX, это то, что мы делаем в эти дни широко. Это экономит время, добавляет динамики и дает вам чувство использования виде программного приложения чувства. Там уже много способов использовать AJAX со многими библиотеками. Но как вы можете видеть этот сайт для JQuery, мы будем смотреть на основной или, возможно, некоторые передовые обычаи AJAX.
Что вы нам нужны?
JQuery библиотеки (конечно)
Крошечные PHP скрипт
Давайте начал говорить. В JQUERY, в основном существуют шесть типов способ сделать АЯКС операций. Это
- $. Ajax (опции)
- $. Получить (URL, данные, вызов)
- $. GetJSON (URL, данные, вызов)
- $. GetScript (URL, вызов)
- нагрузка (URL, данные, вызов)
- $. Сообщению (URL, данные, обратного вызова,
Помимо номер 1, все другие методы использовать $. Ajax внутренне. Итак, что означает $. Ajax () наша мать функция JQuery AJAX операций. Давайте посмотрим, как $. Ajax () выглядит
$. Ajax ({
, типа: "POST",
, URL: "some.php»,
, данные: "имя = Peter & Location = Нью-Йорк»,
( msg ) { Успех: функция (MSG) {
+ msg ) ; Alert ("Ответ сервера" + MSG);
}
}); |
Это довольно его. Тип параметр принимает "GET" или "POST", который означает, что вы можете отправить AJAX запроса на как 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"> нагрузки в Div 4 </ A> </ li>
</ UL> |
Как вы видите, мы поставили ссылки в списке элементов внутри неупорядоченного списка объект. Возьмем более близкий взгляд на свойства тега <a> автора. У нас есть HREF, класс и отн атрибут, который не выглядит отличается от обычной ссылки. Если вы видите, мы дали отн атрибутом некоторых DIV имена именно див1, 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" ) , URL:. $ current_link каста ("HREF"),
( e ) { Успех: функция (е) {
+ $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (". #" + $ Current_link каста ("Rel")) HTML (E);
}
});
; возвращение ложным;
});
}); |
Позвольте мне объяснить, сценарий немного. Document.ready событие является событием, которое срабатывает при загрузке страницы. А потом мы присваиваем какой-то коды на события нажатия ссылки, которые имеют класс "ajax_link". Делать это current_link $ = $ (это); позволяет иметь текущий объект ссылка будет доступна в функции обратного вызова. И у нас есть
$ ("#" + $ Current_link.attr ("Rel")). HTML (E)
что означает $ ("div_id") HTML (server_response), и мы установили URL параметр функции $ Ajax динамически. URL:. $ current_link.attr ("HREF"). Так что теперь все те средства «Все те ссылки, которые имеют класс" ajax_link "- добавить обработчик событий нажатия - и затем выполнить AJAX запрос принимая ссылки HREF Райфайзен и загрузить ответ в DIV с идентификатором соответствует" Rel "атрибут связь ". И возвращение ложным предотвращает ссылка работать как обычно ссылка 
Хотите увидеть это действие? Вот он идет.
И вы можете загрузить исходный , а также.
В следующем разделе этой небольшой статье мы будем использовать одно и то же, но с немного комфорта.
Применив метод проще
Все остается почти такой же. Мы просто изменить метод Ajax здесь. Таким образом, вместо написания целого $. Ajax блок мы можем достичь того же со следующим.
. ready ( function ( ) { $ (Документ). Готовы (функция () {
) . click ( function ( ) { $ ("A.ajax_link»). Нажмите (функция () {
+ $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (". #" + $ (Это) каста ("Rel")) нагрузке ($ (это) каста ("HREF").);
; возвращение ложным;
});
}); |
Это намного меньше, сложные сейчас, правда? Метод Load загружает Ajax содержимое элемента он присоединен. Если $ ("# somediv_id»). Нагрузке ("mypage.php"), он будет пытаться загрузить mypage.php 'с содержанием в нем. Довольно просто, да? Но я предлагаю вам привыкнуть к основным методом (показано в первой части).
В архива есть еще один файл с именем ajax2.php который демонстрирует это Митос который имеет тот же результат.
Так, AJAX не так сложно, как кажется, не так ли? Когда вы становитесь очень свободно с операциями AJAX, Вы создадите магии.
Спасибо за чтение кстати.
Последние комментарии