A PHP Error was encountered

Severity: 8192

Message: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead.

Filename: mysql/mysql_driver.php

Line Number: 303

Отправка POST запроса без перезагрузки страницы

Ajax, урок второй. (Отправка POST запроса без перезагрузки страницы)

Автор: n0one.
Опубликовано 4 февраля 2012
в рубрике Ajax
и помечено как: , , .

Просмотров: 7236.
Подписаться на комментарии по RSS.

Отправка POST запроса без перезагрузки страницы

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

Сегодня я расскажу, как собирать данные из формы, отправлять на сервер и выводить ответ. Начнем, для начала нам понадобится библиотека 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;
?>

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

До новых встреч!

Комментариев: 12

  1. Никита | 17.02.2012 в 18:16:08 | #1

    Огромное спасибо!

  2. Комментатор 8 | 17.02.2012 в 18:23:58 | #2

    Можно ли сделать так, чтобы при отправке GET запроса URL менялся?

  3. n0one | 19.02.2012 в 00:07:42 | #3

    history.pushState(null,null,"новый url")

    window.document.title = "новый title"

  4. Igbur | 20.02.2012 в 00:21:33 | #4

    Подскажите, пожалуйста, новичку.

    В wordpress где находится my_ajax, в какой именно файл записать функцию??

  5. n0one | 20.02.2012 в 14:41:57 | #5

    my_ajax.js - произвольное название, вы можете создать файл с любым именем .js или разместить функцию между тэгами

    /* функция */

  6. n0one | 20.02.2012 в 14:48:17 | #6

    <script type='text/javascript'>

    /* функция */

    </script>

  7. Vlad | 05.03.2012 в 16:33:07 | #7

    Что делать если мне нужно отправить данные из нескольких форм?

  8. n0one | 10.03.2012 в 02:07:45 | #8

    data: ({"form1":form1, "form2":form2}),

  9. Иван | 02.04.2012 в 03:42:17 | #9

    А что делать если нужно разобрать каждое значние в ответе и рассортировать по разным дивам?

  10. Рамзиль | 13.04.2012 в 13:46:22 | #10

    Мне это тоже интересно

  11. n0one | 15.04.2012 в 01:12:12 | #11

    напишите функцию на php, которая будет возвращать, к примеру $str_1 и $str_2 и распределяйте через js:

    success: function(html) {

    $('#div_1').empty();

    $('#div_1').append(str_1);

    $('##div_2').empty();

    $('##div_2').append(str_2);

    }

  12. Rocksy | 22.06.2012 в 12:06:09 | #12

    n0one не получается твоим способом

Оставьте комментарий!

Гость
Комментатор / хотите им стать

Чтобы стать комментатором введите email и пароль. Напишите комментарий. В дальшейшем ваша связка email-пароль, позволит вам комментировать и редактировать свои данные. Не забудьте про активацию (инструкция придет на ящик, указанный при регистрации).

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

(обязательно)