Новости

Ajax і XML: Використання Ajax в формах

  1. Серія контенту:
  2. Цей контент є частиною серії: Ajax і XML
  3. Приклад використання Ajax в простій формі введення даних
  4. Лістинг 1. index.html
  5. Лістинг 2. add.php
  6. Малюнок 1. Приклад простої форми, створеної із застосуванням Ajax
  7. Малюнок 2. Відображення результату
  8. Лістинг 3. index.html
  9. Лістинг 4. getdata.php
  10. Малюнок 3. Форма із заповненням
  11. Малюнок 4. Решта поля форми заповнюються в результаті роботи скрипта, що приймає ID в якості параметра
  12. Оновлювані "за місцем" списки
  13. Лістинг 5. index.php
  14. Лістинг 6. add.php
  15. Лістинг 7. list.txt
  16. Малюнок 5. Додавання елемента до списку справ
  17. Малюнок 6. Сторінка після додавання нового елемента
  18. розширюються списки
  19. Лістинг 8. index.html
  20. Лістинг 9. add.php
  21. Малюнок 7. Форма введення, що містить одне ключове слово
  22. Малюнок 8. Форма введення після додавання ключових слів і натискання на кнопку Submit
  23. форми авторизації
  24. Лістинг 10. index.html
  25. Лістинг 11. login.php
  26. Лістинг 12. home.html
  27. Малюнок 9. Сторінка авторизації після введення неправильного пароля
  28. Малюнок 10. Сторінка авторизації після введення правильного імені користувача та пароля
  29. Ajax і XForms
  30. Лістинг 13. index.xhtml
  31. Лістинг 14. params.php
  32. Малюнок 11. Сторінка XForms, що використовує Ajax
  33. Малюнок 12. Сторінка після натискання на Submit
  34. висновок
  35. Ресурси для скачування

Ajax і XML

Створення форм введення за допомогою Ajax

Серія контенту:

Цей контент є частиною # з серії # статей: Ajax і XML

https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=ajax+и+xml

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Ajax і XML

Слідкуйте за виходом нових статей цієї серії.

Першим, що спадає на думку при словах "додатка Web 2.0", як правило, бувають такі, що запам'ятовуються функції як відео на YouTube, перегляд карт Google Maps з можливістю прокрутки або геолокаційні можливості Flickr. За всією цією пишністю, однак, ховаються скромні HTML-форми, які зазнали масштабні зміни в зв'язку з ростом популярності технології Ajax.

У цій статті я розповім, як використовувати написану на JavaScript бібліотеку Prototype.js, додаючи виклики Ajax в HTML-форми для вирішення типових проблем, пов'язаних зі сприйняттям додатки користувачами.

Приклад використання Ajax в простій формі введення даних

Почнемо з дуже простого прикладу: припустимо, є реєстраційна форма, яка містить кілька полів, яку ми хочемо відправити на сервер за допомогою Ajax, а не звичайним для Web способом. Сама сторінка з формою показана в лістингу 1 .

Лістинг 1. index.html
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <form id = "myform"> <table> <tr> <td> First </ td> < td> <input type = "text" name = "first"> </ td> </ tr> <tr> <td> Last </ td> <td> <input type = "text" name = "last"> </ td> </ tr> <tr> <td> Email </ td> <td> <input type = "text" name = "email"> </ td> </ tr> </ table> <input type = "button" onclick = "dosubmit ()" value = "Submit"> </ form> <div id = "result" style = "padding: 5px;"> </ div> <script> function dosubmit () {new Ajax.Updater ( 'result', 'add.php', {method: 'post', parameters: $ ( 'myform'). serialize ()}); $ ( 'Myform'). Reset (); } </ Script> </ body> </ html>

На початок сторінки я помістив посилання на файл JavaScript prototype.js, в якому укладені всі функції для роботи з Ajax. Після неї слід стандартна HTML-форма з трьома полями: first, last і email. Під нею знаходиться кнопка, яка відправляє вміст форми на сервер, викликаючи функцію JavaScript dosubmit ().

Ця функція використовує клас Ajax.Updater для відправки даних скрипту add.php. При цьому можна задавати різні параметри. У нашому випадку вказується, що дані повинні передаватися методом post, а параметри форми додаються за допомогою виклику методу serialize () у об'єкта форми. Даний метод не є стандартним, а надається бібліотекою JavaScript.

В якості першого параметра при виклику Ajax.Updater виступає ідентифікатор тега <div>, в який поміщається фрагмент HTML, що повертається скриптом add.php. Це найбільш простий спосіб оповіщення користувача про результат натискання на кнопку відправки форми.

Скрипт add.php показаний в лістингу 2 .

Лістинг 2. add.php
Thanks <? Php echo ($ _POST [ 'first'])?&gt; <? Php echo ($ _POST [ 'last'])?>!

Скрипт просто виводить на екран вміст форми. У реальності треба було б щось більше, наприклад, додати запис в базу даних, але ці дії при бажанні ви можете реалізувати самостійно.

При першому завантаженні форми в браузері сторінка буде виглядати приблизно як на малюнку 1 .

Малюнок 1. Приклад простої форми, створеної із застосуванням Ajax

При натисканні на кнопку Submit дані відправляються серверному скрипту add.php, який повертає фрагмент HTML, маючи в своєму розпорядженні його прямо під Submit ( малюнок 2 ).

Малюнок 2. Відображення результату

Варіацією подібних HTML-форм є форми Ajax з автозаповненням, які самостійно змінюють значення деяких полів в залежності від значень певних ключових атрибутів. Типовим прикладом є введення ідентифікатора клієнта і натискання на кнопку, в результаті чого інші поля будуть автоматично заповнені інформацією про даний клієнта.

Приклад форми з автозаповненням наведено в лістингу 3 .

Лістинг 3. index.html
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <form id = "myform"> <table> <tr> <td> ID </ td> < td> <input type = "text" name = "id"> </ td> </ tr> <tr> <td> First </ td> <td> <input type = "text" name = "first" id = "elFirst"> </ td> </ tr> <tr> <td> Last </ td> <td> <input type = "text" name = "last" id = "elLast"> </ td> < / tr> <tr> <td> Email </ td> <td> <input type = "text" name = "email" id = "elEmail"> </ td> </ tr> </ table> <input type = "button" onclick = "dofill ()" value = "Fill Fields"> </ form> <script> function dofill () {new Ajax.Updater ( 'result', 'getdata.php', {method: 'post ', parameters: $ (' myform '). serialize (), onSuccess: function (transport) {$ (' elFirst '). value = transport.responseXML.getElementsByTagName (' first ') [0] .firstChild.nodeValue; $ ( 'elLast'). value = transport.responseXML.getElementsByTagName ( 'last') [0] .firstChild.nodeValue; $ ( 'elEmail'). value = transport.responseXML.getElementsByTagName ( 'email') [0] .firstChild .nodeValue;}}); } </ Script> </ body> </ html>

У форму, показану в лістингу 1 , Я додав нове поле ID, в яке повинен вводитися ідентифікатор клієнта. Після введення викликається функція dofill (), яка звертається до сторінці getdata.php і отримує від неї документ XML, що містить ім'я, прізвище та адресу e-mail зазначеного клієнта.

Обробник події onSuccess, що передається в якості параметра при виклику Ajax.Updater, використовує функції Document Object Model (DOM), підтримувані усіма браузерами, для розбору отриманого документа XML. Потім він заповнює значення елементів <input> з ідентифікаторами elFirst, elLast і elEmail <input> даними з XML.

Сторінка getdata.php показана в лістингу 4 .

Лістинг 4. getdata.php
<? Php header ( "content-type: text / xml"); $ First = ''; $ Last = ''; $ Email = ''; if ($ _POST [ 'id'] == '1') {$ first = 'Jack'; $ Last = 'Herrington'; $ Email = 'jherr@pobox.com'; }?> <Data> <first&gt; <? Php echo ($ first)?> </ First> <last&gt; <? Php echo ($ last)?> </ Last> <email&gt; <? Php echo ($ email )?> </ email> </ data>

Ця сторінка є не що інше як заглушку замість звернення до бази даних для отримання імені, прізвища та адреси e-mail для даного клієнта.

При першому запуску сторінка повинна виглядати як на малюнку 3 .

Малюнок 3. Форма із заповненням

Якщо потім набрати 1 в поле ID і натиснути на кнопку Fill Fields, відбудеться звертання до сторінки getdata.php для отримання імені, прізвища та адреси e-mail. Далі отримані дані будуть поміщені у відповідні поля форми. Результат показаний на малюнку 4 .

Малюнок 4. Решта поля форми заповнюються в результаті роботи скрипта, що приймає ID в якості параметра

В якості наступного фокусу з Ajax я створю оновлюваний список незавершених справ (to-do list).

Оновлювані "за місцем" списки

Одним з поширених прикладів, що використовуються при демонстрації можливостей Ruby on Rails, є списки справ, які оновлюються за місцем (in-place). Іншими словами, уявіть собі список у верхній частині сторінки і розташоване під ним текстове поле. Якщо набрати деякий текст в цьому полі і натиснути на кнопку Submit, то в список буде автоматично доданий новий елемент, причому без перезавантаження сторінки. Текстове поле, в свою чергу, буде очищено, так що можна продовжувати з легкістю додавати елементи.

Насправді, це дуже непросте завдання, тому я вирішив продемонструвати її рішення на PHP. В лістингу 5 показана сторінка, що містить перелік усіх справ.

Лістинг 5. index.php
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <div id = "result" style = "padding: 5px;"&gt; <? Php $ fh = fopen ( 'list.txt', 'r'); while ($ str = fgets ($ fh)) {?&gt; <? php echo ($ str); ?> <br/&gt; <? Php}?> </ Div> <form id = "myform"> <input type = "text" name = "todo"> </ form> <input type = "button" onclick = "dosubmit ()" value = "Submit"> <script> function dosubmit () {new Ajax.Updater ( 'result', 'add.php', {method: 'post', parameters: $ ( 'myform'). serialize ()}); $ ( 'Myform'). Reset (); } </ Script> </ body> </ html>

Замість зберігання елементів списку в базі даних я використовую простий текстовий файл list.txt, в якому перераховані всі записи (по одній на рядок). Таким чином, все, що потрібно для заповнення списку даними - це відкрити файл, прочитати записи і помістити їх усередину елемента <div> з ідентифікатором result.

Під списком знаходиться форма з текстовим полем для введення нових записів. А ще нижче розташована кнопка, що викликає функцію JavaScript dosubmit () при натисканні. Ця функція використовує клас Ajax.Updater для звернення до сторінці add.php, яка додає елемент і повертає оновлений список, що містить новий запис.

Скрипт add.php показаний в лістингу 6 .

Лістинг 6. add.php
<? Php $ total = ''; $ Fh = fopen ( 'list.txt', 'r'); while ($ str = fgets ($ fh)) {?&gt; <? php echo ($ str); ?> <br/&gt; <? Php $ total. = $ Str; } If (array_key_exists ( 'todo', $ _POST)) {?&gt; <? Php echo ($ _POST [ 'todo']); ?> <br/&gt; <? Php $ fh = fopen ( 'list.txt', 'w'); fwrite ($ fh, $ total. "\ n". $ _ POST [ 'todo']); fclose ($ fh); }?>

Мій невигадливий список справ показаний в лістинг 7 .

Лістинг 7. list.txt
Get swim goggles (Купити окуляри для плавання) Practice swimming (Тренуватися) Swim in race (Брати участь в змаганнях з плавання)

При першому завантаженні сторінка виглядає як на малюнку 5 .

Малюнок 5. Додавання елемента до списку справ

Потім, якщо набрати "Finish in record time!" (побити рекорд) і натиснути Submit, то список оновиться без перезавантаження сторінки. Результат показаний на малюнку 6 .

Малюнок 6. Сторінка після додавання нового елемента

Зрозуміло, демонстрації можливостей Rails не обмежуються тільки списками справ. Але вони є одними з факторів успіху Web 2.0. До речі кажучи, якщо вам не доводилося працювати з Rails, то я настійно рекомендую вам (як і будь-якого Web-програмісту) спробувати його в справі. Навіть якщо ви вирішите не використовувати його в своїх проектах, вам буде корисно подивитися, як вибудовується архітектура додатків, як використовується механізм MVC (модель-уявлення-контролер) і наскільки легко працювати з моделлю зберігання даних.

Ще одним прикладом часто зустрічається в Web ситуації є списки полів з можливістю додавання нових. Я називаю їх розширюються списками (expando lists).

розширюються списки

Як реалізувати можливість додавання необмеженої кількості ключових слів до деякої записи? В якості одного із способів можна запропонувати використовувати список слів, які поділяються комами. Або можна створити кнопку, за допомогою якої користувачі можуть додавати довільну кількість ключових слів. В лістингу 8 показаний приклад реалізації другого підходу.

Лістинг 8. index.html
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <form id = "myform"> <table id = "keytable"> <tr> <td> Keyword </ td> <td> <input type = "text" name = "keyword_1"> </ td> </ tr> </ table> </ form> <input type = "button" onclick = "addkeyword ()" value = "Add Keyword"> <input type = "button" onclick = "dosubmit ()" value = "Submit"> <div id = "result" style = "padding: 5px;"> </ div> <script> var nextkeyid = 2; function addkeyword () {var elTR = $ ( 'keytable'). insertRow (-1); var elTitleTD = elTR.insertCell (-1); elTitleTD.appendChild (document.createTextNode ( 'Keyword')); var elInput = document.createElement ( 'input'); elInput.type = 'text'; elInput.name = 'keyword _' + nextkeyid; nextkeyid ++; var elInputTD = elTR.insertCell (-1); elInputTD.appendChild (elInput); } Function dosubmit () {new Ajax.Updater ( 'result', 'add.php', {method: 'post', parameters: $ ( 'myform'). Serialize ()}); } </ Script> </ body> </ html>

Центральне місце тут займає функція addkeyword (), яка використовує виклики insertRow і insertCell для створення нового рядка в таблиці ключових слів. Потім за допомогою методу document.createElement вона створює нове поле вводу для зберігання слова. При натисканні на кнопку Submit клас Ajax.Updater викличе скрипт add.php, який просто повертає список ключових слів, отриманих від форми. Скрипт показаний в лістингу 9 .

Лістинг 9. add.php
Post Result: <br/&gt; <? Php var_export ($ _POST)?>

Спочатку в моєму браузері сторінка виглядає так, як показано на малюнку 7 .

Малюнок 7. Форма введення, що містить одне ключове слово

Потім, після того як за допомогою кнопки Add Keyword я створив кілька нових полів і натиснув на Submit, сторінка набрала вигляду як на малюнку 8 .

Малюнок 8. Форма введення після додавання ключових слів і натискання на кнопку Submit

Це найкращий спосіб дати користувачам можливість додавати кілька значень до однієї і тієї ж записи. Це зручно використовувати для таких речей як телефонні номери, ключові слова або адреси. А ще одним типовим прикладом використання Ajax є форми авторизації.

форми авторизації

Форми авторизації особливо гарні в Ajax тому, що вони, по-перше, відразу показують, чи була спроба входу вдалою чи ні, а по-друге, дозволяють виробляти авторизацію "за місцем". Уявіть, що ви читаєте статтю і хочете залишити свої зауваження, але це вимагає авторизації. Завдяки Ajax ви можете авторизуватися, не покидаючи сторінку зі статтею. Якщо у вас достатньо прав доступу, то вам відразу буде показана форма для введення коментаря. Це набагато простіше, ніж відстежувати, на якій сторінці перебував користувач, щоб перенаправити його на цю сторінку після успішної авторизації.

Приклад простої форми авторизації, що використовує Ajax, показаний в лістингу 10 .

Лістинг 10. index.html
<Html> <head> <script src = "prototype.js"> </ script> </ head> <body> <form id = "logform"> User: <input type = "text" name = "user"> <br/> Password: <input type = "password" name = "password"> <br/> <input type = "button" onclick = "login ()" value = "Login"> </ form> <div id = "noway" style = "display: none;"> No way! </ Div> <script> function login () {new Ajax.Request ( 'login.php', {method: 'post', postBody: $ ( 'logform'). Serialize (), onSuccess: function (transport) { if (transport.responseText.match (/ \ <ok \ / \> /)) window.location = 'home.html'; else $ ( 'noway'). style.display = 'block';}}); } </ Script> </ body> </ html>

Форма, що знаходиться у верхній частині сторінки, містить поля User і Password. Під ними розташований елемент <div> з ідентифікатором noway, який показується в разі негативного результату авторизації. Спроба авторизації здійснюється за допомогою методу login () в JavaScript, який використовує клас Ajax.Request. У разі, якщо скрипт login.php повертає XML-фрагмент <ok />, то форма перенаправляє користувача на домашню сторінку. В іншому випадку на екран виводиться вміст елемента noway.

Скрипт login.php представлений в лістингу 11 .

Лістинг 11. login.php
<? Php header ( 'Content-type: text / xml'); if ($ _POST [ 'user'] == 'jack' && $ _POST [ 'password'] == 'password') echo ( "<ok />"); else echo ( "<bad />"); ?>

Цей код просто використовує жорстко задані значення імені користувача і пароля і повертає ok в разі збігу. В іншому випадку повертається bad.

Для повноти картини код домашньої сторінки показаний в лістингу 12 .

Лістинг 12. home.html
<Html> <body> You are logged in and this is your home page. </ Body> </ html>

Для початку завантажте форму в браузер, введіть неправильне ім'я і пароль і натисніть Login. Результат повинен бути як на малюнку 9 .

Малюнок 9. Сторінка авторизації після введення неправильного пароля

Якщо ж змінити ім'я користувача і пароль на коректні значення і знову натиснути Login, то ви будете перенаправлені на домашню сторінку, яка показана на малюнку 10 .

Малюнок 10. Сторінка авторизації після введення правильного імені користувача та пароля

Як останній приклад розглянемо використання Ajax спільно з XForms.

Ajax і XForms

Я не вважаю себе експертом в XForms, але мені подобається цей стандарт. Далі я покажу, як можна спільно використовувати клієнтські форми XForms з Prototype.js і Ajax.

Нескладний код прикладу з використанням XForms показаний в лістингу 13 .

Лістинг 13. index.xhtml
<Html xmlns = "http://www.w3.org/1999/xhtml" xmlns: xforms = "http://www.w3.org/2002/xforms"> <head> <title> XForms AJAX Example </ title> <xforms: model id = "modelData"> <xforms: instance xmlns = ""> <Data> <First> First </ First> <Last> Last </ Last> <Email> [email protected] </ Email> </ Data> </ xforms: instance> </ xforms: model> <script src = "prototype.js"> </ script> </ head> <body> <xforms: input ref = "/ Data / First "> <xforms: label> First: </ xforms: label> </ xforms: input> <br/> <xforms: input ref =" / Data / Last "> <xforms: label> Last: </ xforms: label > </ xforms: input> <br/> <xforms: input ref = "/ Data / Email"> <xforms: label> Email: </ xforms: label> </ xforms: input> <br/> <br / > <button onclick = "submit ()"> Submit </ button> <script> function submit () {var m = $ ( 'modelData'); var base = m.getElementsByTagName ( 'Data') [0]; var s = new XMLSerializer (); var data = (s.serializeToString (base)) .toString (); new Ajax.Updater ( 'result', 'params.php', {method: 'post', parameters: 'data =' + escape (data)}); } </ Script> <br/> <br/> <div id = "result"> </ div> </ body> </ html>

На початку файлу знаходиться XML-опис моделі XForm. Потім слід набір міток і полів XForms, складових саму форму введення. При натисканні на кнопку Submit відбувається виклик функції JavaScript submit (). Ця функція використовує JavaScript-об'єкт XMLSerializer для сериализации даних моделі XForms в XML-рядок, яка потім передається скрипту params.php. Цей скрипт, показаний в лістингу 14 , Трансформує XML в HTML, який потім виводиться на сторінку.

Лістинг 14. params.php
<? Php echo (htmlentities ($ _POST [ 'data'])); ?>

Якщо відкрити цю сторінку в браузері з встановленим плагіном XForms, то вона буде виглядати як на малюнку 11 .

Малюнок 11. Сторінка XForms, що використовує Ajax

Заповнивши форму даними і натиснувши Submit, ви побачите результат, показаний на малюнку 12 .

Малюнок 12. Сторінка після натискання на Submit

Як бачите, сторінка містить дані моделі, які були серіалізовані в XML-рядок, передані скрипту params.php, а потім відправлені назад на сторінку, всередину тега <div> з ідентифікатором result.

висновок

Використання Ajax в формах HTML відкриває широкі можливості, лише мала частина яких порушена в даній статті. Проте, в ній містяться кілька реалістичних прикладів, які можуть наштовхнути вас на думці про те, чого можна домогтися в ваших власних додатках, уникнувши серйозних змін на сторінках.

Ресурси для скачування

Схожі теми

  • Оригінал статті: " Ajax and XML: Ajax for forms "(Джек Д. Херрингтон, developerWorks, січень 2008 р.) (EN)
  • зайдіть на домашню сторінку PHP , Що містить безцінні матеріали для PHP-програмістів. (EN)
  • бібліотека Prototype : Прочитайте про можливості цієї інфраструктури JavaScript, створеної для спрощення розробки динамічних Web-додатків. (EN)
  • JavaScript-бібліотека Scriptaculous : В ній ви знайдете кошти для додавання до вашого Web-сайту різних ефектів, відмінно доповнюють інфраструктуру на основі Prototype. (EN)
  • встановіть модуль XForms для Firefox , Який необхідний для запуску прикладів до даної статті. (EN)
  • Зверніться до документації по Prototype.js documentation page за додатковою інформацією про бібліотеку Prototype. Крім того, на цій сторінці ви знайдете посилання на офіційний блог Prototype і багато інших матеріалів. (EN)
  • прочитайте про jQuery - ще одній бібліотеці JavaScript, що володіє схожими з Prototype.js можливостями. (EN)
  • ознайомтеся з Yahoo! User Interface Library - інструментарієм Ajax, розробленим Yahoo! (EN)
  • відвідайте розділ по XML на сайті developerWorks , Що містить велику колекцію матеріалів по XML.

Підпишіть мене на повідомлення до коментарів

Jsp?
Php echo ($ _POST [ 'first'])?
Gt; <?
Php echo ($ _POST [ 'last'])?
Com'; }?
Php echo ($ first)?
Php echo ($ last)?
Php echo ($ email )?
Php $ fh = fopen ( 'list.txt', 'r'); while ($ str = fgets ($ fh)) {?
Gt; <?

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация:

Все права защищены © 2013 Производственная компания El.Od
Промышленное производство рыбной продукции