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>

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

  • Администратор: к записи Не знаю, с ходу не скажу. »
  • Андрей: к записи Сорри, лишнее TD »
  • Андрей: к записи У вас лишнее в 71 строке. За быстрый урок спасибо »
  • Михаил: к записи Здравствуйте. Спасибо помогло! А не скажите как не »
  • Олег: к записи Добрый день! Да пагинация в таком ключе действите »
  • Радик: к записи Помогите, не получается спарсить. Вот тут #ire »
  • Администратор: к записи Когда меняете пароль к базе в панели управления хо »

Статистика спама

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