Така AJAX AJAX и AJAX, това е, което правим широко в наши дни. Това спестява време, добавя динамика и ви дава усещане за използване вид софтуер, прилагането на усещане. Там сте много начини за използване на AJAX с много библиотеки. Но както можете да видите, този сайт е за JQuery, ще разгледаме основните или може би някои напреднали обичаи, AJAX.
Какво имаме нужда?
JQuery библиотека (разбира се)
Един мъничък скрипт PHP
Нека започна да говори. В JQuery, всъщност има 6 вида на метод за AJAX операции. Това са
- $. Ajax (опция)
- Долара. (URL, данни, обратно)
- $. GetJSON (URL адрес, данни, обратно повикване)
- $. GetScript (URL, обратно)
- натоварване (URL адрес, данни, обратно повикване)
- $. Мнение (URL, данни, обратно,
Отделно от номер 1, всички останали методи използват. Аякс вътрешно. Така че, това означава, че $. Аякс () е функция на нашата майка на jQuery операции AJAX. Нека погледнем как долара. Ajax () изглежда като
msg ) ; } } ) ; Отговор "+ MSG);}});
Това е доста. Видът параметър се "GET" или "пост", което означава, че можете да изпратите на AJAX requestion като POST или да получите (аз предпочитам POST винаги). Останалите параметри са доста самостоятелно обяснителен, ако погледнете в кода отново.
Сега отиваме да направим малък AJAX скрипт, който чете връзка на хипервръзки тагове (<a>) и зарежда искането на някои DIV елементи в документа.
Първо взема нормален HTML, PHP на документа, който ще изглежда така
<DOCTYPE HTML публично място! "- / / 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> Аякс връзка тест </ Title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"> </ скрипта> </ Глава> <body> </ BODY> </ HTML>
Сега нека добавим някои връзки към документа. За по-добро меню вид на външен вид ще използваме UL> LI и връзка. Това ще изглежда така
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> натоварване в Div 1 </ A> </ li> <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> натоварване в Div 2 </ A> </ li> <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> натоварване в Div 3 </ A> </ li> <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> натоварване в Div 4 </ A> </ li> </ UL>
Както можете да видите ние имаме поставени линкове в списъка елементи вътре неподреден списък обект. Вземете по-отблизо в свойствата на тагове <a>. Ние имаме HREF, класа и съответ атрибут, който изглежда нищо по-различно от нормална връзка. Ако виждате, имаме предвид съответ атрибут на някои DIV имена, а именно div1, div2 .. така нататък. Това означава, че искаме отговор на HREF да бъдат заредени в тези DIV секциите. Как да направите това? Нека добавим тези DIV секциите за първи път
<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 = $ (това); $. Аякс ({ , Тип: "пост", ( "href" ) , URL: $ current_link attr ("HREF"), ( e ) { успех: функция (д) { + $current_link. attr ( "rel" ) ) . html ( e ) ; $ ("#" + $ Current_link attr (съответ ")) HTML (д); } }); ; върне FALSE; }); });
Нека ти обясня малко сценария. Document.ready събитие е събитие, което се задейства при зареждане на страницата. И тогава ние сме възлагане на някаква кодове на клик случай на връзките, които имат клас "ajax_link". Това $ current_link = $ (това); позволява да има за текущия обект връзка е на разположение в рамките на функция за обратно извикване. И ние имаме
$ ("#" + $ Current_link.attr (съответ ")). HTML (д)
което означава $ ("div_id) HTML (server_response) и сме създали URL параметри на $ функция Аякс динамично с URL:. $ current_link.attr (" HREF "). Така че сега всички тези средства, "Всички тези връзки, които имат клас" ajax_link "- Добавяне на манипулатора на събитие кликване - след това изпълнение и AJAX искане Връзки HREF покупки и зареждане на отговор в DIV, чийто номер съвпада с" съответ ", атрибут на връзка ". И върне FALSE пречи на връзката работа като нормална връзка 
Искам да го видя дадено действие? Тук тя отива.
И вие може да свалите източник , както добре.
В следващия раздел на този малък урок ще се използва едно и също нещо, но с малко комфорт.
Прилагането на лесен метод
Всичко остава почти същото. Ние просто ще се промени метода на Аякс тук. Така че, вместо на писане целия $. Аякс блок можем да постигнем едно и също нещо със следното.
. ready ( function ( ) { $ (Документ). Готова (функция () { ) . click ( function ( ) { $ ("A.ajax_link"), кликнете (функция () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; $ ("#" + $ (Това) attr ("REL")) натоварване ($ (това) attr ("HREF")); ; върне FALSE; }); });
Това е много по-малко сложно, нали? Натоварването метод зарежда AJAX съдържанието вътре в елемента, който е прикачен към. Ако $ ("# somediv_id"). Натоварване ("mypage.php"), ще се опитам да се зареди mypage.php "съдържанието в него. Доста просто, нали? Но аз предлагам да се използва за основен метод (показан в първата част).
В компресирания файл има друг файл, наречен ajax2.php, което демонстрира това methos, което има същия резултат.
Така че, AJAX не е толкова трудно, колкото звучи, нали? Когато станете много свободно с AJAX операции, ще създаде магии.
Благодаря за четене BTW.
Скорошни коментари