Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Dipomny_proekt МОЯ.doc
Скачиваний:
17
Добавлен:
22.02.2016
Размер:
2.15 Mб
Скачать

3.3 Приклад використання бібліотеки jQuery для обміну даними засобами Ajax

Серед застосувань бібліотеки JQuery найбільш поширеним є динамічне завантаження інформації у елементи сторінки HTML. Як приклад розглянемо задачу виведення підказки в залежності від набраного користувачем тексту в поле форми (рисунок 3.9). Для реалізації даної задачі необхідно створити три файли і розмістити їх на сервері:

1. HTML-сторінка (hint.html).

2. Програма мовою Javascript із використанням JQuery (hint.js).

3. Текстовий файл, який містить можливі підказки (hint.txt).

Рисунок 3.9. Результат роботи асинхронного завантаження даних у HTML-сторінку

HTML-сторінка містить код, який задає структуру документа (рисунок 3.10):

<C!DOCTVPE html>

<html>

<head>

<script type^'text/jauascript" src="jquery;.js"></script>

<script type="text/jauascript" src="hint.js"></script>

<meta charset=utf-8 />

<title> Приклад Jquery Ajax</title>

<style type="text/css">

#hint {border: 1px solid black; margin:0}

#hint>diu:houer {background: ttccc}

#hint {display:none; margin-left:4px>

</style>

</head>

<body>

<form>

<diu>Mido :</diu>

<input type^'text" autoconplete="off" id="city"/>

<diu id="hint"></diu>

</form>

</body>

</html>

Рисунок 3.10. HTML-код сторінки

З рисунка 3.10 видно, що для виконання задачі включено підтримку бібліотеки JQuery, а також зовнішній файл hint.js, який здійснює операції уведення-виведення. Крім того, задаються мінімально необхідні налаштування стилів (тег <style>), а також власне форма HTML із елементом cityтекстовим полем та контейнером div з id=”hint” для виведення підказки.

Код програмного файлу hint.js наведено на рисунку 3.11. Особливостями роботи даної програми є використання засобів JQuery для завантаження списку даних (назв міст) з сервера в асинхронному режимі (.get()).

// ініціалізація поля уведення з id="city"

$().ready( function()

{

$<"itcity").keyup(show_hint).click(cl);

}

);

// сховати та очистити підказку

function cl(euent)

{

$("#hint").hide();

$("#hint").empty();

}

// показати підказку

function show_hint(euent)

{

// очистити застарілі підказки

cl(null)

// s - активний елемент зі списку підказок

s = euent.target

if ($(s).ual()=="") return;

// отримати список підказок, Math.random() - захист від кешування $.get ("hint .txt?,a+Math.random(), function (data) {

if (data==,,,,) return

var a = data.split('\n')

for (uar і in a) {

// якщо підказка підходить, додати її в список

if (а[і].indexOf($("#city").ual())>-1)

$("hint").append ("<diu>"+a[і]+a"</diu>")

}

// підготувати оброблювач onclick для кожної підказки всередені контейнера

$("#hint>diu").click(function(event){ $("#city").ual( $(euent.target).text());cl(null)})

// змінити стиль підказки

$("#hint>diu").сss({"font-weight":"bold"})

// якщо є підказки, показати їх

if($("#hint>div").length>0)

$("#hint").width($("#city").width()).show();

}

}

Рисунок 3.11. Код програми мовою Javascript

Функція .ready() виконується в момент завантаження сторінки, функція cl() викликається, коли необхідно приховати та очистити підказку (наприклад, при виборі зі списку), а функція show_hint() виконується при натисканні користувачем клавіші клавіатури. Крім того, використовуються засоби пошуку елементів HTML із використанням синтаксису мови CSS, зокрема #hint>div означає «знайти усі елементи div всередині елемента з id=hint.

Для прикладу файл hint.txt, який містить підказки має наступний вигляд (риcунок 3.12):

Київ

Полтава

Одеса

Львів

Луганськ

Рисунок 3.12. Вміст файлу hint.txt, який містить можливі підказки

Для спрощення реалізації у прикладі серверна частина складається лише з простого текстового файлу. В реальних умовах це може бути програма будь-якою мовою, що використовується у Web-технологіях, в тому числі з залученням різноманітних бібліотек, зокрема, CodeIgniter. При цьому обробка відбувається таким же чином, як і в традиційній моделі (з використання Ajax).

ПРОЕКТНА ЧАСТИНА

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]