Привет, дорогой читатель!

Сегодня я расскажу, как собирать данные из формы, отправлять на сервер и выводить ответ. Начнем, для начала нам понадобится библиотека jQuery, подключить её можно через Google(https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js), либо скачать себе.

Создадим простую html страничку с формой.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Отправка формы используя Ajax
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<script type="text/javascript" src="my_ajax.js">
<form action="">
<input id="text" type="text">
<input onclick="send();" value="Отправить" type="button">
</form>
<div id="response">

Рассмотрим эту страничку:

1. Мы подключили библиотеку jQuery и библиотеку my_ajax.

2. Мы создали формы на html и присвоили ей id text и функцию send().

3. Мы создали div в котором получим ответ.

Теперь мы рассмотрим библиотеку my_ajax и функцию send().

Тут всё очень просто, в библиотеке my_ajax мы просто создадим саму функцию send() и укажем ей, что делать при её активации.

function send()
{
//Получаем параметры
var text = $('#text').val()
 // Отсылаем паметры
 $.ajax({
 type: "POST",
 url: "/action.php",
 data: "text="+text,
 //При удачном завершение запроса - выводим то, что нам вернул PHP
 success: function(html) {
 //предварительно очищаем нужный элемент страницы
 $("#response").empty();
//и выводим ответ php скрипта
 $("#response").append(html);
 }
 });
}

Рассмотрим этот скрипт:

1. Мы получаем информацию из формы с id`ом text

2. Мы отсылаем данные на сервер:

2.1 type: "POST" - тип запроса

2.2 url: "/action.php" - адрес скрипта которые получит данные

2.3 data: "text="+text - отправляем данные

3. При успешном завершение обработки мы очищаем div response и выводим в него ответ php скрипта

Теперь про сам php обработчик.

Собственно мы можем делать с переменными всё, что душе угодно, но сейчас мы просто выведем их на экран.

<?php
$text = $_POST["text"];
if(!$text)
{$text = "Вы ничего не написали";}
echo $text;
?>

Вот и всё, ребята

http://live-code.ru