AJAX - как сделать запрос к PHP-коду без перезагрузки страницы

@Vshining · Регистрация: 04.12.2016

Author24 — интернет-сервис помощи студентам

Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы вроде "Как выполнить функцию PHP из JavaScript-кода?" или "Как отправить форму без перезагрузки?", она напросилась в этом разделе сама самой.

Итак, AJAX - это Asynchronous Javascript And XML - асинхронный JavaScript и XML, если по-русски. Разберём каждое слово:

1) Асинхронный - это и есть то самое, чего все так хотят - выполнение действий без перезагрузки страницы. Пока JavaScript отправил запрос на сервер, пользователь продолжает выполнять действия на странице, т.к. никаких переходов при отправке запроса не происходит.

2) JavaScript - язык программирования, который используют инструменты для отправки AJAX-запросов. Т.к. статья для новичков, то подразумевается, что вы используете либо только чистый JavaScript, либо в совокупности с jQuery. Если вы не используете jQuery, то для создания такого запроса требуется создание объекта XMLHttpRequest. В jQuery всё немного проще и лаконичнее - вы пользуетесь методами $.post и $.get для отправки соответствующих запросов. Когда нужно использовать post, а когда get - чуть позже.

3) XML - в контексте этой статьи это не так важно, считайте это отсылкой к тому самому объекту XMLHttpRequest, ведь сначала появился именно этот способ.

Таким образом, AJAX - это способ отправки запросов (и данных) на сервер без перезагрузки страницы и, как следует, прерывания действий пользователя.

О методах GET и POST.

Обычно, любой запрос сопровождается некоторыми параметрами. В GET-запросах такие параметры передаются в URL, например: http://site.com/index.php?param1=value1&param2=value2. Это накладывает два ограничения:
1) Объём отправляемых данных существенно ограничен - объём классического GET-запроса находится в диапазоне от 2 до 8 килобайт по умолчанию.
2) Данные открыты - не желательно передавать чувствительные данные, например - пароли. Из-за этого, POST-запросы встречаются намного чаще.

У POST-запроса, в отличие от GET, есть тело, которое помещается после заголовка (а GET-запрос имеет только его). Данные тела явно не передаются (относительно - трафик можно прослушать, но это уже вопрос применения шифрования и защищенного канала). Объём информации, который можно передать в теле, опять же, зависит от настроек сервера. По умолчанию, этот объём порядка 20 мегабайт. И, разумеется, можно передавать GET-параметры через URL. В общем случае, POST-запросы являются более гибкими.

Теперь рассмотрим отправку этих двух видов запросов с помощью обозначенных выше методов - с помощью объекта XMLHttpRequest и методов jQuery - $.post и $.get.

GET-запрос

В качестве примера используем следующий "скрипт":

hello.php

PHP

1
2
3

<?php
$name = $_GET['name'];
echo "Hello, $name!";

1) XMLHttpRequest

Javascript

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        } else {
        alert('Произошла ошибка!');
    }
};
 
xmlhttp.open("GET", "hello.php?name=Webkill", true);
xmlhttp.send(null);

В строке один происходит создание объекта. Во второй мы присваиваем этому объекту свойство onreadystatechange - функцию, которая будет выполнена, когда
будет получен ответ на запрос. Такая функция называется callback (колбэк). В ней мы обрабатываем два случая - когда запрос прошел нормально, и когда произошла ошибка.

В 10-той строке мы вызываем метод, в который передаём три параметра:
1) "GET" - тип запроса
2) "hello.php?name=Webkill" - URL запроса: файл hello.php и один параметр name.
3) true - асинхронность. Если false - то браузер будет ожидать ответа (синхронность).

На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр - null (позже, через этот параметр будут передаваться данные тела POST-запроса).

2) jQuery

Javascript

$.get("hello.php", {name: "Webkill"},
    function(data) {
        alert(data);
    }
);

Собственно, отправка GET-запроса в jQuery заключается в вызове метода $.get с тремя параметрами:
1) "hello.php" - часть URL без GET-параметров
2) {name: "Webkill"} - параметры запроса в виде ассоциативного массива (JSON)
3) Функция-обработчик, которая вызывается в случае "успеха"

POST-запрос

Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль.

login.php

PHP

<?php
$login = 'Webkill';
$pass = 'qwerty123';
 
if($_POST['login'] == $login && $_POST['password'] == $pass) {
    echo 'Добро пожаловать!';
} else {
    echo 'В доступе отказано.';
}

1) XMLHttpRequest

Javascript

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        } else {
            alert('Произошла ошибка!');
        }
};
 
xmlhttp.open("POST", "login.php", true);
xmlhttp.send({login: inputLogin, pass: inputPassword});

Легко заметить, что в целом код не изменился. Поменялся только первый параметр функции open - тип запроса, и теперь мы передаём данные в метод send в формате JSON.

2) jQuery

Javascript

$.post('login.php', {login: inputLogin, pass: inputPassword}, 
    function(data) {
        alert(data);
    }
);

Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST - попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную.

Естественно, круг задач, для которых используется AJAX намного шире - загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры.

Для дальнейшего изучения:
jQuery $.post
jQuery $.get
Русский сайт о XMLHttpRequest

@Kerry_Jr · 21.12.2016, 09:28

Сообщение от Vshining

В jQuery всё немного проще и лаконичнее - вы пользуетесь методами $.post и $.get

Единственное, что хочется добавить, - это еще один удобный метод $.ajax(), который может использоваться для отправки как GET, так и POST-запроса.

@ProCode · 26.12.2016, 20:00

По существу: Исполнение PHP-скрипта без перезагрузки страницы и без знания JavaScript(!) - Xajax - решил запостить отдельной темой, бо Xajax - это особая большая тема (ожидаю много вопросов там). Ко всему прочему, это как раз и есть практически чистое PHP. Т.е. JavaScript там разумеется есть, но он упакован внутрь PHP-обертки настолько плотно, что кодеру при написании Ajax-скрипта нужно написать не более 1-2 простейших строчек на JavaScript.

@полудух · 30.12.2016, 13:11

забыли описать, как из формы передать данные

Javascript

1	data: $(form_id).serialize()

(для $.ajax)

@DJestin · 09.01.2017, 13:13

Что-то у меня не получаается.. страница все равно перезагружается..
Делаю так:

index.php

PHP/HTML

<form id="form_id" name="form_id" method="post">
<input type="login" name="login" value="<?php echo $_POST['login'];?>"><br>
<input type="text" name="password" value="<?php echo $_POST['password'];?>"><br>
<input type="submit" value="New">
</form>
<script type="text/javascript">
$data: $(form_id).serialize();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
} else { alert('Произошла ошибка!'); } };
xmlhttp.open("POST", "login.php", true);
xmlhttp.send({login: inputLogin, pass: inputPassword});
</script>

login.php

PHP

if($_POST['login'] && $_POST['password'] ) {
echo 'Добро пожаловать!<br>';
} else {
echo 'В доступе отказано.<br>';
}

Работает, но при нажатии на кнопку , страница перезагружается.. А как сделать что бы не перезагружалась страница???
Может я конечно что то не так делаю, подскажите, пожалуйста!!

@полудух · 09.01.2017, 13:53

а что это, собственно, за лажа?

Сообщение от DJestin

$data: $(form_id).serialize();

и XMLHttpRequest() уже не нужна, когда юзается jQuery (не забываем подключать)

изучаем: http://ruseller.com/lessons.php?rub=32&id=1452

Javascript

Пример 2
 
Передаем пользовательские данные PHP скрипту.
$.ajax({
        type:'POST',
        url:'response.php?action=sample2',
        data:'name=Andrew&nickname=Aramis',
        success:function(data){$('.results').html(data);}
});

здесь вместо data:'блаблабла' - вставляем

Javascript

1	data: $(form_id).serialize()

где form_id это some_id из <form id='some_id'>...</form>

для отладки в скрипте ловите: var_dump($_POST);exit;

@DJestin · 09.01.2017, 15:14

Сделала так:
index.php

HTML5

<form id="form_id" name="form_id" method="post">
            <input type="login" name="login" value="<?php echo $_POST['login']; ?>"><br>
            <input type="text" name="password" value="<?php echo $_POST['password']; ?>"><br>
  <input type="submit" value="New">
</form>
 <script>
 $.ajax({
             type: 'POST',
             url: 'index.php?action=sample2',
             data: $(form_id).serialize(),
             success: function (data) {
             $('.results').html(data);
            }
       });
 </script>
 <?php    var_dump($_POST);exit;  ?>

После того как нажата кнопка делается перезагрузка страницы и выдает:
array(2) { ["login"]=> string(5) "blala" ["password"]=> string(9) "blablabla" }
Как сделать без перезагрузки??

И вот эта ссылка не работает

изучаем: http://ruseller.com/lessons.php?rub=32&id=1452

@полудух · 09.01.2017, 16:25

<form id="form_id" method="post" onsubmit='return false;'>
ну или заменить type="submit" на type="button" (хотя правильнее использовать просто <button ...>)

$('.results').html(data);

а где блок с class='results' ?

Сообщение от DJestin

И вот эта ссылка не работает

печальненько ( видимо, ничто не вечно

@DJestin · 09.01.2017, 16:38

Вот так вот надо??
index.php

HTML5

<form id="form_id" name="form_id" method="post" >
           <input type="login" name="login1" value="<?php echo $_POST['login1']; ?>"><br>
           <input type="text" name="password" value="<?php echo $_POST['password']; ?>"><br>
      <button>Ok</button>
</form>
<script>
$.ajax({
         type: 'POST',
         url: 'login.php',
         data: $(form_id).serialize(),
         success: function (data) {
         $('.results').html(data);
         }
     });
</script>
<div class='results'></div>
<?php var_dump($_POST);   exit; ?>

вот только при нажатии на кнопку страница перезагружается

@полудух · 09.01.2017, 16:48

PHP

<?php
#var_dump($_POST);exit; // это раскомментить после загрузки страницы и до нажатия кнопки
# ваш скрипт пока ещё ничего путного не возвращает на AJAX-запрос, он лишь вернёт дубль формы.
# Надо так:
if (!empty($_POST{'what'}) && $_POST{'what'} === 'ajax')
{
    echo 'AJAX приехал! '.$_POST{'login1'};
    exit;
}
 
 
<form id="form_id" method="post" onsubmit='return false;'>
<input name='what' value='ajax'>
<input type="login" name="login1" value="<?php echo $_POST['login1']; ?>"><br>
<input type="text" name="password" value="<?php echo $_POST['password']; ?>"><br>
<button onclick='ajaxPOST("form_id");return false;'>Ok</button>
</form>
 
<script>
function ajaxPOST(form_id)
{
$.ajax({
type: 'POST',
url: 'login.php',
data: $(form_id).serialize(),
success: function (data) {
$('.results').html(data);
}
});
 
} // ajaxPOST
</script>
 
<div class='results'></div>

?>

@DJestin · 09.01.2017, 17:14

Сделала как ты сказал.., ни чего не происходит

Сообщение от полудух

# ваш скрипт пока ещё ничего путного не возвращает на AJAX-запрос, он лишь вернёт дубль формы.

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

@полудух · 09.01.2017, 18:01

сказал же jQuery подключить

PHP/HTML

<?php
#var_dump($_POST);exit; // это раскомментить после загрузки страницы и до нажатия кнопки
# ваш скрипт пока ещё ничего путного не возвращает на AJAX-запрос, он лишь вернёт дубль формы.
# Надо так:
 
if (!empty($_POST{'what'}) && $_POST{'what'} === 'ajax')
{
    echo 'AJAX приехал! '.$_POST{'login1'};
    exit;
}
?>
 
<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-3.1.1.min.js'></script>
</head>
 
<body>
<form id="form_id" method="post" onsubmit='return false;'>
<input type=hidden name='what' value='ajax'>
<input type="login" name="login1" value=''><br>
<input type="text" name="password" value=''><br>
<button onclick='ajaxPOST("#form_id");'>Ok</button>
</form>
 
<script>
function ajaxPOST(form_id)
{
//alert($(form_id).serialize());exit;
 
$.ajax({
type: 'POST',
url: 'index.php',
data: $(form_id).serialize(),
success: function (data) {
    $('.results').html(data);
}
});
 
} // ajaxPOST
</script>
 
<div class='results'></div>
 
</body>
</html>

@Dimon3x · 10.01.2017, 16:31

Это вопрос или статья?

@fanatikus · 10.01.2017, 18:45

Сообщение от DJestin

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

PHP/HTML

    <script type="text/javascript">
        $(function () {
            $('#form_id').submit(function(e){
                e.preventDefault();//отменяем действие по умолчанию(отправка формы)
                var data = $(this).serialize();// получаем данные из формы
                $.ajax({
                    url:'ajax.php',//адрес обработчика
                    type:'post',//метод передачи данных
                    data:data,
                    success:function(res){
                        $('#result').html(res);//выводим ответ с сервера в контейнер с id='result'
                    }
                })
            })
        })
    </script>
    <form id="form_id" method="post">
        <input type="login" name="login" value=''><br>
        <input type="text" name="password" value=''><br>
        <button type="submit" name="sub">Ok</button>
    </form>
    <div id="result"></div><!--тут выведем ответ с сервера-->

файл ajax.php

PHP

1	echo 'login-'.$_POST['login'].'<br>'.'password- '.$_POST['password'];

@And82 · 11.01.2017, 13:36

Спасибо за статью. Но я не нашёл ответа на свой вопрос. У меня 1 функция в php файле. Он находится в той же папке, что и html файл с кнопкой, при нажатии на которую должна вызываться эта 1 функция.

Javascript

function tra(){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", "Api.php", false );
    xmlHttp.send( null );
};

только консоль пишет ошибку Api.php 404 - not found.

@Зверушь · 12.01.2017, 14:14

And82, запрос должен ити на url, как-то так:

Javascript

1	xmlHttp.open( "GET", "http://адрес_вашего_сайта/Api.php", false );

смотря куда вы положили файл Api.php.

404 ошибка означает, что искомый ресурс не найдет, что в вашем случае совершенно очевидно.

@ProCode · 30.01.2017, 16:45

Еще немного Аякса для начинающих:

Пример простейшего калькулятора на PHP без перезагрузки страницы (чистый Ajax, без jQuery и других библиотек)

@NaMoRZA · 17.02.2017, 20:22

Здравствуйте, уважаемые.
Подскажите пож-та, - по вашему примеру выше, сделал свою форму - все ОК! А как сделать, чтобы ответ (который: <div id="result"></div>) выводился во всплывающем окне, но не просто как уведомление, а как html,-чтобы ему можно было стили задать:
Файл ajax.php с формой:

PHP/HTML

<script type="text/javascript">
        $(function () {
            $('#form_id').submit(function(e){
                e.preventDefault();//отменяем действие по умолчанию(отправка формы)
                var data = $(this).serialize();// получаем данные из формы
                $.ajax({
                    url:'reg.php',//адрес обработчика
                    type:'post',//метод передачи данных
                    data:data,
                    success:function(res){
                        $('#result').html(res);//выводим ответ с сервера в контейнер с id='result'
                    }
                })
            })
        })
    </script>
 
<form id="form_id" method="post">
        <input type="hidden" name="data1" value="<?=$ip?>">
        <label class="form_label">Ф.И.О.:</label>
            <input type="text" name="name" placeholder="Введите имя" pattern="[a-zA-Zа-яА-ЯёЁіІїЇєЄ]+\s[a-zA-Zа-яА-ЯёЁіІїЇєЄ]{2,64}|[a-zA-Zа-яА-ЯёЁіІїЇєЄ]{2,64}" required title="Разрешены только буквы">
        <label class="form_label">Телефон:</span></label>
            <input type="text" name="phone" placeholder="Введите телефон" pattern="[+]{1}[0-9]{5,15}|[0-9]{5,14}" required title="Разрешены только цифры">
        <button type="submit" name="sub">Ok</button>
    </form>
    
    <div id="result"></div><!--тут выведем ответ с сервера-->

reg.php:

PHP

1
2
3

<?php
echo 'name-'.$_POST['name'].'<br>'.'phone- '.$_POST['phone'];
?>

ВЕБ-разработке только неделю как учусь, не судите строго если буду задавать тупые вопросы.

Спасибо заранее.

@полудух · 17.02.2017, 21:03

Сообщение от NaMoRZA

прописать стили всплывающего окна (position:absolute;display:none;margin:0 auto) и грузить в него html, а потом через JQ дать ему $('#result').show();

@NaMoRZA · 17.02.2017, 22:14

Сообщение от полудух

прописать стили всплывающего окна.....

Спасибо за помощь!
Сделал так:
<div id="result" style="position:absolute;display:none;margin:0 auto;"></div>
и после "$('#result').html(res);//выводим ответ с сервера в контейнер с id='result'"
добавил $('#result').show();
Что-то ничего не поменялось.. Что не так?

Добавлено через 53 минуты
нету всплывающего окна..((
Понимаю, что должно быть просто, но рыская дальше по форуму и интернету ничего не могу человеческого найти, а то, что нахожу - больше похоже на костыли..(

@полудух 209 / 191 / 49 Регистрация: 15.03.2016 Сообщений: 1,211
	17.02.2017, 21:03	19
	Сообщение от NaMoRZA <div id="result"></div> прописать стили всплывающего окна (position:absolute;display:none;margin:0 auto) и грузить в него html, а потом через JQ дать ему $('#result').show(); 1

@Kerry_Jr 3106 / 2591 / 1219 Регистрация: 14.05.2014 Сообщений: 7,236 Записей в блоге: 1
	21.12.2016, 09:28	2
	Сообщение от Vshining В jQuery всё немного проще и лаконичнее - вы пользуетесь методами $.post и $.get Единственное, что хочется добавить, - это еще один удобный метод $.ajax(), который может использоваться для отправки как GET, так и POST-запроса. 1

@ProCode 37 / 37 / 6 Регистрация: 11.12.2016 Сообщений: 329 Записей в блоге: 6
	26.12.2016, 20:00	3
	По существу: Исполнение PHP-скрипта без перезагрузки страницы и без знания JavaScript(!) - Xajax - решил запостить отдельной темой, бо Xajax - это особая большая тема (ожидаю много вопросов там). Ко всему прочему, это как раз и есть практически чистое PHP. Т.е. JavaScript там разумеется есть, но он упакован внутрь PHP-обертки настолько плотно, что кодеру при написании Ajax-скрипта нужно написать не более 1-2 простейших строчек на JavaScript. 2

@полудух 209 / 191 / 49 Регистрация: 15.03.2016 Сообщений: 1,211
	09.01.2017, 16:25	8
	<form id="form_id" method="post" onsubmit='return false;'> ну или заменить type="submit" на type="button" (хотя правильнее использовать просто <button ...>) $('.results').html(data); а где блок с class='results' ? Сообщение от DJestin И вот эта ссылка не работает печальненько ( видимо, ничто не вечно 0

@DJestin 0 / 0 / 1 Регистрация: 29.12.2016 Сообщений: 157
	09.01.2017, 17:14	11
	Сделала как ты сказал.., ни чего не происходит Сообщение от полудух # ваш скрипт пока ещё ничего путного не возвращает на AJAX-запрос, он лишь вернёт дубль формы. А как сделать что бы он вернут мне то что пользователь напишет в login и password ?? 0

@Dimon3x 3 / 3 / 1 Регистрация: 24.03.2013 Сообщений: 304
	10.01.2017, 16:31	13
	Это вопрос или статья? 0

@ProCode 37 / 37 / 6 Регистрация: 11.12.2016 Сообщений: 329 Записей в блоге: 6
	30.01.2017, 16:45	17
	Еще немного Аякса для начинающих: Пример простейшего калькулятора на PHP без перезагрузки страницы (чистый Ajax, без jQuery и других библиотек) 0

@NaMoRZA 126 / 2 / 1 Регистрация: 24.07.2015 Сообщений: 17
	17.02.2017, 22:14	20
	Сообщение от полудух прописать стили всплывающего окна..... Спасибо за помощь! Сделал так: <div id="result" style="position:absolute;display:none;margin:0 auto;"></div> и после "$('#result').html(res);//выводим ответ с сервера в контейнер с id='result'" добавил $('#result').show(); Что-то ничего не поменялось.. Что не так? Добавлено через 53 минуты нету всплывающего окна..(( Понимаю, что должно быть просто, но рыская дальше по форуму и интернету ничего не могу человеческого найти, а то, что нахожу - больше похоже на костыли..( 0