jQuery - Използване на стенографски AJAX методи (с примери), IT Chef
В тази статия ще разгледаме съкратените AJAX методи на jQuery: load, get, getJSON, getScript и post. Тези методи правят много лесно да се правят необходимите AJAX заявки и, за разлика от функцията ajax, те изискват по-малко редове код за писане.
jQuery - метод за зареждане
Методът за зареждане има следния синтаксис:
В повечето случаи методът за зареждане използва GET за изпращане на заявка. Но може да използва и метода POST. Това се случва само когато данните, които трябва да бъдат изпратени до сървъра, са посочени не във формат на низ, а чрез обект.
Примери за използване на метода на натоварване
1. Поставете съдържанието на файла asidenav.tpl в c блока след зареждане на DOM на страницата:
2. Заредете част от файла demo.html в елемента, като щракнете върху бутона, намиращ се в него:
Съдържание на файла Demo.html:
3. Заредете в елемента, който има отговор content.php. Този отговор ще зависи от стойността на атрибута data-content на бутона, изпратил AJAX заявката до сървъра.
На сървъра (файл content.php):
4. Разгледайте горния пример, в който ще прехвърляме данни не във формат на низ, а чрез обект. Освен това ще изведем допълнителни данни към конзолата на браузъра, като отговор на сървъра, състояние на отговор и обект XMLHTTPRequest.
На сървъра (файл content.php):
jQuery - функция за получаване
Функцията get е предназначена за изтегляне на данни от сървъра чрез HTTP GET заявка.
Синтаксис на функцията:
По подразбиране функцията get се опитва автоматично да определи формата на данните, получени от сървъра (xml, json, скрипт, текст или html). Той прави това въз основа на MIME типа на отговора.
Например, за дафункцията get определи, че форматът на данните, получени от сървъра, е JSON, от страната на сървъра в php скрипта трябва да се зададе подходящата заглавка:
В jQuery можете също да обработвате отложени събития на AJAX, като използвате методите Promise done (при успех), fail (при грешка), always (при успех или грешка).
вземете примери за функции
1. Заредете съдържанието на файла content.tpl в HTML елемента след зареждане на страницата:
2. AJAX получава на всеки 5 секунди ново изображение (URL) от определена директория на сървъра и го показва на страницата (вместо предишното изображение).
Съдържанието на файла random-image.php:
3. Пример, в който внедряваме AJAX зареждане на съдържание.
Нека представим данните за зареждане на сървъра като масив $contents. Количеството данни, които трябва да бъдат заредени, и позицията на отместване ще бъдат определени, съответно, като се използват стойностите на променливите count и offset. Ние ще обработим данните, получени от сървъра, като използваме метода Promise done.
Съдържание на файла contents.php:
jQuery - getJSON функция
Функцията getJSON е предназначена за изтегляне на JSON-кодирани данни от сървъра чрез HTTP GET заявка.
Функцията getJSON е идентична с get с dataType, зададен на "json".
Синтаксис на функцията getJSON:
Пример за използване на функцията getJSON
Пример, в който след зареждане на страницата ще изведем списък със страници. Ще получаваме данни от сървъра, използвайки AJAX във формат JSON.
Съдържание на файла Pages.json:
jQuery - getScript функция
Синтаксисът на функцията getScript е:
Пример за използване на функцията getScript
След като заредим страницата, получаваме сСкрипт за заявка на AJAX и го изпълнете:
Съдържанието на скрипта script.js:
jQuery пост функция
Функцията post е предназначена за изтегляне на данни от сървъра чрез HTTP POST заявка.
Синтаксис на функцията post:
Използването на post не се различава от използването на функцията get на jQuery. Единствената разлика между тях е методът, по който изпращат данни към сървъра. Функцията post изпраща данни като част от тялото на заявката (метод POST), докато функцията get изпраща данни като част от URL адреса (метод GET).
Примери за използване на функцията post
1. Пример, в който ще помолим потребителя да познае нашия цвят. За целта ще му предоставим избор от няколко цвята с помощта на радио бутоните и бутона „Познай“. Ние ще изпратим избрания цвят на сървъра с помощта на функцията jQuery post. На сървъра ще сравним "нашият цвят" и цвета, който потребителят е избрал чрез условие. В зависимост от това дали имената на цветовете са равни, ние ще върнем стойността успех или грешка като отговор. На клиента (в браузъра), след получаване на отговор от сървъра и в зависимост от неговия резултат, ще извършим определени действия. А именно, когато получим отговор за успех, ще скрием контролите и ще покажем съобщението: „Да, познахте нашия цвят!“. В противен случай просто ще покажем текста: „Не, нашият цвят е различен!“.
Съдържание на файла guess-color.php:
2. Пример, в който внедряваме система за поздравяване на потребителите. Докато потребителят не въведе името си, ще го приветстваме като гост. Ще определим дали текущият потребител има име, както и ще го изпратим до сървъра чрез AJAX (jQuery post функция). От страната на сървъра ще запазим потребителското име чрез сесии.
Съдържание на файла username.php: