JQuery AJAX PHP: пример

Сей материал содержит простейший пример применения технологии AJAX, используя последнюю в совокупности с JQuery и PHP. Для новой статьи я взял ту же форму, что и в демке с использованием аякса на чистом JavaScript.

Т.е. мы с вами имеем все те же два многострочных текстовых поля данные из которых будут приниматься из HTML формы, показанной на снимке окна выше, скриптом на PHP посредством JQuery Ajax.

JQuery Ajax PHP - пример

Скачать

Листинг 1. HTML форма + вся разметка исходной веб-страницы. Обратите внимание на элементы с именами area_1 и area_2, а также на подключение самой библиотеки JQuery и блок с идентификатором status, где будет отображаться результат:

<!DOCTYPE html>
<html lang="ru">
<head>
 <meta charset="utf-8">
 <title>JQuery + Ajax + PHP: пример</title>
 <link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <link href="css/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
 <link href="css/main.css" rel="stylesheet">
 <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
 <script src="application.js"></script>
</head>
<body>
<div class="container-fluid">
 <div class="row-fluid">
 <div id="status"><!-- Здесь будет отображаться Ajax-обработка. --></div>
 <form method="post" action="get_ajax.php">
 <label>Многострочное поле ввода 1:</label>
 <p><textarea class="input-xxlarge" id="area_1" name="area_1" rows="3">
Наберите здесь любой текст...
 </textarea></p>
 <label>Многострочное поле ввода 2:</label>
 <p><textarea class="input-xxlarge" id="area_2" name="area_2" rows="3">
Ваш произвольный текст...
 </textarea></p>
 <input class="btn" type="button" 
 value="Запустить пример!" onclick="run_script()">
 </form>
 </div><!-- /.row-fluid -->
</div><!-- /.container-fluid -->
</body>
</html>

Продолжение, которые включает PHP и JavaScript части смотрите на второй странице.

Опубликовано 26-03-2013 в 13:00


Комментариев к записи: 3

  1. Дмитрий:

    Замечательно!! А можете пожалуйста сделать подобный пример, который бы без SUBMIT отправляло POST’ом? А то уже 2-ю неделю ищу, и не могу найти подходящего ответа. Очень хочется с подобный эффектом.

  2. Alex:

    Спасибо за инфу, друг.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты