Привет, дорогой читатель!
Сегодня я расскажу, как собирать данные из формы, отправлять на сервер и выводить ответ. Начнем, для начала нам понадобится библиотека jQuery, подключить её можно через Google(https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js), либо скачать себе.
Создадим простую html страничку с формой.
|
1 2 3 4 5 6 7 8 9 |
<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() и укажем ей, что делать при её активации.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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 обработчик.
Собственно мы можем делать с переменными всё, что душе угодно, но сейчас мы просто выведем их на экран.
|
1 2 3 4 5 6 |
<?php $text = $_POST["text"]; if(!$text) {$text = "Вы ничего не написали";} echo $text; ?> |
Вот и всё, ребята 🙂
До новых встреч!