Курилка.co.ua Войти »
Orphus RSS kurilka.co.ua

Category

Archives

« Next Item:   Previous Item: »

Курилка.co.ua › Вебмастеру › Ajax: Работа с формами (forms) при помощи jQuery

Ajax: Работа с формами (forms) при помощи jQuery

Author wmas wmas | Category Category Вебмастеру

Появление асинхронного JavaScript и XML (AJAX) подхода к построению интерактивных интерфейсов веб-приложений позволил значительно увеличить быстродействие и удобство многих сайтов. Я еще помню свои попытки создать какую-то свою библиотеку для этих целей. Однако, зачем мучиться если есть jQuery – вполне рабочий и достаточно маленький, может даже удобный. Хотя, пусть каждый выбирает то, что ему нравится. Я же озвучил свой выбор и на его основе хочу рассказать, как пробовал обрабатывать данные формы на основе jQuery.

Начну с идеи. У нас есть форма (id="myForm"), которая размещена в DIV’е (id="myDiv"). Кликая по кнопке «ok» срабатывает JavaScript функция FormClick(), которая передает данные формы PHP-скрипту обработчику handler.php. Результат обработки помещается в DIV, заменяя тем самым форму. Для всего этого используется библиотека jQuery.

Теперь разберемся с HTML-кодом, который мы поместим в приделах <body>…</body> нашей страницы, назовем ее, form.html:

<div id="myDiv">
<form id="myForm">
<input type="text" name="name">
<input onclick="FormClick(); return false" type="button" value="ok">
</form>
</div>

Думаю, что картина несколько прояснилась и можно приступить к JavaScript деталям, которые мы разместим в приделах <head>…</head>. Хотя это уже на Ваш вкус. Я лишь описываю свой пример.

<!-- подключаем библиотеку jQuery -->
<script src="patch2/jquery.js"></script>

<!--
JavaScrip функция выполняющая передачу,
скрипту-обработки handler.php, данных формы
и выводит результата в DIV'е (myDiv),
заменяя тем самым форму
-->
<script>
function FormClick () {
  var str = $("#myForm").serialize();
  $.post("handler.php", str, function(data) {
    $("#myDiv").html(data);
  });
}
</script>

Здесь стоит подробней остановиться на том, что собственно делает функция FormClick. В начале она создает переменную str, значением которой являются данные формы. Далее, используя конструкцию $.post, данные формы (str) передаются скрипту-обработчику handler.php. Особенность состоит в том, что используется метод передачи данных – POST и callback функцию (function(data)), которая выводит результат обработки данных в DIV (myDiv): $("#myDiv").html(data);. Всё достаточно просто и удобно. Для большего прояснения картины приведу содержание PHP-кода скрипта-обработчика (handler.php):

<? echo 'name: '.$_POST['name'] ?>

Как можно догадаться он выведет следующее: name: input_in_field_name_text. Вот вроде и все. Надеюсь, заметка кому-то будет полезна. Спасибо за внимание.

Контакты. Найден по ссылке: зимняя детская одежда интернет магазин.

Tags Tags , , , ,
Publish: Воскресенье Июл 6, 2008

28 Responses for "Ajax: Работа с формами (forms) при помощи jQuery"

feed for comments on this post

  • Nalivaeff Комментарий #1739 author: Nalivaeff Reply
    publish: Вторник Июл 8, 2008 at 1:19 пп

    Константин, все зашибись. Я как раз разбираюсь с аяксом чтобы впендюрить его в свою чекиллу и эта статья очень кстати. Но на мой взгляд в подобных постах ОЧЕНЬ (!) не хватает ссылок на доп. страницы с примерами.

  • wmas Комментарий #1740 author: wmas Reply
    publish: Вторник Июл 8, 2008 at 3:08 пп

    2Nalivaeff: Привет! В заметке представлен ВЕСЬ код с примером. Я даже незнаю, что тут ещё добавить, какие ссылки. Есть мэнюел по jQuery и если нужны подробности их легко там найди :roll:

  • vint Комментарий #1744 author: vint Reply
    publish: Четверг Июл 10, 2008 at 11:55 дп

    Спасибо, как раз вот начал разбираться с jquery.

  • delaf Комментарий #1757 author: delaf Reply (subscribed to comments)
    publish: Воскресенье Июл 27, 2008 at 12:01 пп

    Всегда в конце надо давать ссылку «а посмотреть в действии можно тут!»

  • wmas Комментарий #1758 author: wmas Reply
    publish: Воскресенье Июл 27, 2008 at 1:47 пп

    2delaf: hi! Лень вылаживать примеры. Да и затронутая тема достаточно простая и понятная ;-)

  • Петр Комментарий #1764 author: Петр Reply
    publish: Среда Июл 30, 2008 at 7:43 дп

    Спасибо большое!
    Дело-то на самом деле несложное, но я на нем застопорился, а благодаря твоей статье очень быстро во всем разобрался.

  • Паша Комментарий #1957 author: Паша Reply
    publish: Суббота Окт 25, 2008 at 1:20 дп

    Спасибо, очень пригодилось.
    Все просто и доступно!

  • Nalivaeff Комментарий #1976 author: Nalivaeff Reply
    publish: Среда Окт 29, 2008 at 10:01 пп

    Было бы неплохо если бы во время выполнения скрипта мельтишила бы какая нибудь gif’ка. А то остается поле формы и посетитель может нажать несколько раз на «ок»

  • wmas Комментарий #1977 author: wmas Reply
    publish: Среда Окт 29, 2008 at 11:26 пп

    2Nalivaeff: hi! ну, можно более элегантно поступить, наложить на кнопку disabled, просто это уже второстепенные фишки. Главное, как на мой скромный взгляд, понять сам принцип ;-)

  • Nalivaeff Комментарий #1978 author: Nalivaeff Reply
    publish: Четверг Окт 30, 2008 at 12:21 пп

    А можно по подробнее про disabled? как его применить?

  • wmas Комментарий #1979 author: wmas Reply
    publish: Четверг Окт 30, 2008 at 12:25 пп

    2Nalivaeff: к примеру так:

    <input type="submit" onclick="this.disabled=true;">

  • Nalivaeff Комментарий #2016 author: Nalivaeff Reply
    publish: Четверг Ноя 20, 2008 at 10:17 пп

    Так чего-то не получилось. А там ведь уже есть другой onclick
    Расскажи, мил человек, как сделать во время исполнения скрипта чтоб в диве где должны быть результаты крутилась какая нибудь гифка или просто была надпись «Загрузка…»
    Только чур сильно не бить, я эти джаваскриптные штуки только начал осваивать :oops:

  • wmas Комментарий #2018 author: wmas Reply
    publish: Четверг Ноя 20, 2008 at 11:07 пп

    2Nalivaeff: да можно этот javascript код с дисейблом впихнуть в саму функцию FormClick ().

    На счёт предзарузочного гифа или там сабжа «Загрузка…» это тоже достаточно просто. Можно использовать jQuery фичу .html(). К примеру

    $('#idname').html('Загрузка...');

    Этот код подставляет любой прописанный html-код (в нашем случае просто «Загрузка…») в ту или иную область с id="idname" — надеюсь разберёшся ;-) Удачи :!:

  • Nalivaeff Комментарий #2034 author: Nalivaeff Reply
    publish: Четверг Ноя 27, 2008 at 1:00 дп

    Наконец то разобрался с onclick=»this.disabled=true :-)
    А вот $(‘#idname’).html(‘Загрузка…’); чего то не клеется…
    я так понимаю, что ее нужно присобачить тоже к onclick но вот как?
    Сейчас сама форма запроса у меня токая

    Исправь ее пожалуйста так чтоб в id=»myForm» при нажатии на OK появлялось слово «Загрузка…»
    Буду очень признателен
    …просто очень нужно

  • wmas Комментарий #2045 author: wmas Reply
    publish: Воскресенье Ноя 30, 2008 at 12:14 дп

    2Nalivaeff: сам код видать затёрся. По сути, как я и говорил, всё это — дисейбл и «Загрузка…» можно прописать в функцию FormClick() следя за последовательностью строк кода. Для того что тебе нужно функция должна выглядеть так:

    function FormClick (objButton) {
      objButton.disabled=true
      $('#myDiv').html('Загрузка…');
      var str = $("#myForm").serialize();
      $.post("handler.php", str, function(data) {
        $("#myDiv").html(data);
      });
      return false;
    }

    тогда как html-код кодки может быть следующим

    <input onclick="return FormClick(this)" type="button" value="ok">

    обрати внимание на параметр функции objButton это объект нашей кнопки, который в html-коде кнопки я прописал как this ;-)

  • Nalivaeff Комментарий #2049 author: Nalivaeff Reply
    publish: Воскресенье Ноя 30, 2008 at 1:14 пп

    Спасибо огромное! Все заработало! Мега респект!

  • КЕМ Комментарий #2221 author: КЕМ Reply
    publish: Суббота Мар 28, 2009 at 8:01 пп

    большое спасибо!!!! очень и очень понятно

  • Spazm Комментарий #2265 author: Spazm Reply
    publish: Четверг Апр 23, 2009 at 10:52 дп

    Большое спасибо — код очень пригодился.

  • ed Комментарий #2319 author: ed Reply
    publish: Среда Июн 17, 2009 at 1:19 пп

    Спасибо, помогло.

  • Sera2007 Комментарий #2363 author: Sera2007 Reply (subscribed to comments)
    publish: Понедельник Июл 27, 2009 at 10:29 пп

    Спасибо!!! Статья очень помогла!

  • Xasim Комментарий #2433 author: Xasim Reply (subscribed to comments)
    publish: Вторник Сен 29, 2009 at 1:13 дп

    Все супер!
    Но возникла одна проблема…
    Если передаваемые обработчиком данные содержат русские буквы, то на экране появляется аброкадабра вида:
    «РџР°СЂРѕР»СЊ»

    Как с этим бороться? Я уже весь инет перерыл, но вразумительного ответа не нашел :(

  • wmas Комментарий #2434 author: wmas Reply
    publish: Вторник Сен 29, 2009 at 1:09 пп

    2Xasim: hi! Да есть небольшой нюанс с кириллицей. По умолчанию, calback функция воспринимает данные в формате UTF-8, для того, чтобы работать скажем с кодировкой windows-1251 нужно в handler.php указать нужную кодировку через header():

    header('Content-Type: text/html; charset=windows-1251');

  • Xasim Комментарий #2435 author: Xasim Reply (subscribed to comments)
    publish: Вторник Сен 29, 2009 at 1:26 пп

    2wmas: Спасибо, но подобный способ я уже пробовал — не помогает :cry:

    Сервер ругается:

    Warning: Cannot modify header information — headers already sent by (output started at Q:\home\test1.ru\www\777\handler.php:1) in Q:\home\test1.ru\www\777\handler.php on line 2

    Или это у меня руки не из того места растут?

  • wmas Комментарий #2436 author: wmas Reply
    publish: Вторник Сен 29, 2009 at 4:46 пп

    2Xasim: функция header() необходимо использовать до какого-либо вывода. Другими словами попробуй её поставить в самое начало :roll:

  • Xasim Комментарий #2438 author: Xasim Reply (subscribed to comments)
    publish: Среда Сен 30, 2009 at 1:02 пп

    В том то и дело, что header(); я ставлю в самое начало php файла, а на выходе получается все таже абракодабра :-?

    Или я где-то косячу???

    Единственный работающий метод — это использовать:

    print_r(iconv('utf-8','windows-1251',$name));

  • wmas Комментарий #2440 author: wmas Reply
    publish: Среда Сен 30, 2009 at 1:27 пп

    2Xasim: мои уточнения были только на счет ворнинга, если вылазит абракадабра, думаю стоит обратить внимание на кодировку входящих данных, т.е. страницы с формой (form.html). Впрочем, не исключаю, что jQuery как всегда стремится работать только с UTF-8 и по всей видимости таки надо iconv’ить

  • Xasim Комментарий #2442 author: Xasim Reply (subscribed to comments)
    publish: Среда Сен 30, 2009 at 6:06 пп

    2wmas: а как быть, если необходимо подгрузить часть кода (реьд), содержащей скрипт, ведь в этом случае он (скрипт) не будет работать без перезагрузки страницы?

    Не так выразился :oops:
    Вылазит предупреждение сервера…

  • wmas Комментарий #2443 author: wmas Reply
    publish: Среда Сен 30, 2009 at 7:54 пп

    2Xasim: дополнительные javascript действия можно прописать в callback функции…

    На счет ворнинга, тут однозначно — был вывод каких-то данных до использования header() посмотри может есть какие-то пробелы перед <?php в handler.php

Popular links
Copyright © since 2006 Курилка.co.ua,
powered by WordPress