AJAX PHP Post Request

Примеры отправки AJAX JQuery

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

$.ajax(< url: '/index.php', /* Куда пойдет запрос */ method: 'get', /* Метод передачи (post или get) */ dataType: 'html', /* Тип данных в ответе (xml, json, script, html). */ data: , /* Параметры передаваемые в запросе. */ success: function(data) < /* функция которая будет выполнена после успешного запроса. */ alert(data); /* В переменной data содержится ответ от index.php. */ >>);

Код можно сократить используя функцию $.get

$.get('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_GET['text'];

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

$.ajax(< url: '/index.php', method: 'post', dataType: 'html', data: , success: function(data) < alert(data); >>);

Или сокращенная версия – функция $.post

$.post('/index.php', , function(data)< alert(data); >);

Код файла index.php

echo 'Данные приняты - ' . $_POST['text'];

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

• Кнопки формы по которым был клик игнорируются, в результате функции их не будет.
• serialize можно применить только к тегу form и полям формы, т.е. $(‘div.form_container’).serialize(); – вернет пустой результат.

Пример отправки и обработки формы:

Код файла handler.php

if (empty($_POST['login'])) < echo 'Укажите логин'; >elseif (empty($_POST['password'])) < echo 'Укажите пароль'; >else

Работа с JSON

Идеальный вариант когда нужно работать с массивами данных.

Короткая версия

$.getJSON('/json.php', function(data) < alert(data.text); alert(data.error); >);

$.getJSON передает запрос только через GET.

Код файла json.php

header('Content-Type: application/json'); $result = array( 'text' => 'Текст', 'error' => 'Ошибка' ); echo json_encode($result);

Возможные проблемы

При работе с JSON может всплыть одна ошибка – после запроса сервер отдал результат, все хорошо, но метод success не срабатывает. Причина кроется в серверной части (PHP) т.к. перед данными могут появится управляющие символы, например:

Из-за них ответ считается не валидным и считается как ошибочный запрос. В таких случаях помогает очистка буфера вывода ob_end_clean (если он используется на сайте).

. // Очистка буфера ob_end_clean(); header('Content-Type: application/json'); echo json_encode($result, JSON_UNESCAPED_UNICODE); exit();

Выполнение JS загруженного через AJAX

В JQuery реализована функция подгруздки кода JS через AJAX, после успешного запроса он будет сразу выполнен.

Или

Дождаться выполнения AJAX запроса

По умолчанию в JQuery AJAX запросы выполняются асинхронно. Т.е. запрос не задерживает выполнение программы пока ждет результатов, а работает параллельно. Простой пример:

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', success: function(data)< text = data; >>); alert(text); /* Переменная будет пустая. */

Переменная text будет пустая, а не как ожидается текст который вернул index.php Чтобы включить синхронный режим нужно добавить параметр async: false .
Соответственно синхронный запрос будет вешать прогрузку страницы если код выполняется в страницы.

var text = ''; $.ajax( < url: '/index.php', method: 'get', dataType: 'html', async: false, success: function(data)< text = data; >>); alert(text); /* В переменной будет результат из index.php. */

Отправка HTTP заголовков

$.ajax(< url: '/index.php', method: 'get', dataType: 'html', headers: , success: function(data) < console.dir(data); >>);

В PHP они будут доступны в массиве $_SERVER , ключ массива переводится в верхний регистр с приставкой HTTP_ , например:

Обработка ошибок

Через параметр error задается callback-функция, которая будет вызвана в случаи если запрашиваемый ресурс отдал 404, 500 или другой код.

$.ajax(< url: '/index.php', method: 'get', dataType: 'json', success: function(data)< console.dir(data); >, error: function (jqXHR, exception) < if (jqXHR.status === 0) < alert('Not connect. Verify Network.'); >else if (jqXHR.status == 404) < alert('Requested page not found (404).'); >else if (jqXHR.status == 500) < alert('Internal Server Error (500).'); >else if (exception === 'parsererror') < alert('Requested JSON parse failed.'); >else if (exception === 'timeout') < alert('Time out error.'); >else if (exception === 'abort') < alert('Ajax request aborted.'); >else < alert('Uncaught Error. ' + jqXHR.responseText); >> >);

Комментарии 4

В примере Отправка формы через AJAX страница перезагружается. Видимо нужно добавить return false после $.ajax(<>);

$("#form").on("submit", function() $.ajax( url: '/handler.php', 
method: 'post', 
dataType: 'html', 
data: $(this).serialize(), 
success: function(data) $('#message').html(data); 
> 
>); 
return false;
>);

$("#form").on("submit", function(e). 
e.preventDefault();
>)

У меня вообще не работали POST запросы, особенно для меня, для начинающего было очень сложно, работали только GET, очень долго голову ломал почему так происходит. Нашёл пример на другом сайте, который работал долго сравнивал и думал почему так. Здесь пример не работает, а на другом сайте рабочий пример оказался.
Так вот:
$.ajax( url: ‘/index.php’,
method: ‘post’,
dataType: ‘html’,
data: ,
success: function(data) alert(data);
>
>);
Оказывается чтобы у меня заработали именно POST запросы надо было поменять строчку:
«method: ‘post’,» на:
«type: ‘post’,» и всё сразу заработало после этого. А я ведь ни один день ломал голову из-за этой ошибки!

Источник

AJAX PHP Post Request With Example

In this article, we will see how to send an AJAX PHP post request with an example. Generally, a POST request is used to send the data to a PHP file then we can use that data, process it like validation checking, data saving, mail sending, etc, and then PHP will send the response with the message, data, response code, etc.

Why We Use AJAX?

AJAX is used to perform various HTTP requests like POST, GET, PUT, etc. AJAX is used to update the part of the webpage without reloading a page. Overall, it will improve the user experience.

For example, Let’s say we are using jQuery AJAX Post request for login form so in this, we will send username and password to the PHP file. In that file, we will check the username and password into the database and allow login users or show them an error message in the login form.

Where We Can Use AJAX?

We can use AJAX everywhere on the website. Let’s see very useful places where AJAX is used.

1. Login form to validate the user and redirect the user if successful or show messages on the form
2. Registration form to insert data into the database, email and show server-side validations, etc
3. Sending contact us form’s email and show success or error message on the form
4. AJAX is used in data-tables to fetch only required data to overcome load on servers
5. For the pagination of posts, tables, load more button effect, etc.
6. Autocomplete search like you type Au and it brings the lists with Au words
7. To create filters like pricing filters, colors filters, category filters, etc

Use jQuery $.ajax() Method To Send HTTP Request

Different users follow different ways to send data using AJAX. Let’s see how to do that.

1. AJAX: Send Data Using Object Parameters

To send in parameters, you need to create a JavaScript object. So to do that you need to get values using .val() function and create an object using it something like below.

But what if you have a large number of fields in your form in that case you need to submit the whole form data one by one but that isn’t a good idea right? In that case, use the second option after this point.

let firstName = $('#firstname').val(), lastName = $('#lastname').val(), message = $('#message').val(); $.ajax(< method: "POST", url: 'file.php', data: < firstname: firstName, lastname: lastName, message: message >, success: function(response)< console.log(response); >, error: function(xhr, status, error) < console.error(xhr); >>);

2. AJAX: Send Whole Form Data Using serialize() & serializeArray() Methods

serialize() method creates data in query string format so due to that submitting a file with this function won’t work.

serializeArray() method creates data in JavaScript array objects.

Suppose, you have a form and you want to submit the whole form data using AJAX then you can do something like the below:

let formData = $('#myForm').serialize(); /* Or use serializeArray() function same as serialize() let formData = $('#myForm').serializeArray(); */ $.ajax(< method: "POST", url: 'file.php', data: formData, success: function(response)< console.log(response); >, error: function(xhr, status, error) < console.error(xhr); >>);

3. AJAX: Send Whole Form Data Using FormData() methods

The FormData() is a constructor that creates a new FormData object as below:

let myForm = document.getElementById('myForm'); let formData = new FormData(myForm); $.ajax(< method: "POST", url: 'file.php', data: formData, success: function(response)< console.log(response); >, error: function(xhr, status, error) < console.error(xhr); >>);

If you want to append extra key-value pair in FormData() object then you can use obj.append(‘key’, ‘value’) function as below:

formData.append('action', 'insert');

4. User Registration Using AJAX PHP Post Request

In this example, we will submit a simple registration form using AJAX PHP Post request.

index.php

         body < color: #fff; background: #3598dc; font-family: "Roboto", sans-serif; >.form-control < height: 41px; background: #f2f2f2; box-shadow: none !important; border: none; >.form-control:focus < background: #e2e2e2; >.form-control, .btn < border-radius: 3px; >.signup-form < width: 400px; margin: 30px auto; >.signup-form form < color: #999; border-radius: 3px; margin-bottom: 15px; background: #fff; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); padding: 30px; >.signup-form h2 < color: #333; font-weight: bold; margin-top: 0; >.signup-form hr < margin: 0 -30px 20px; >.signup-form .form-group < margin-bottom: 20px; >.signup-form input[type="checkbox"] < margin-top: 3px; >.signup-form .row div:first-child < padding-right: 10px; >.signup-form .row div:last-child < padding-left: 10px; >.signup-form .btn < font-size: 16px; font-weight: bold; background: #3598dc; border: none; min-width: 140px; >.signup-form .btn:hover, .signup-form .btn:focus < background: #2389cd !important; outline: none; >.signup-form a < color: #fff; text-decoration: underline; >.signup-form a:hover < text-decoration: none; >.signup-form form a < color: #3598dc; text-decoration: none; >.signup-form form a:hover < text-decoration: underline; >.signup-form .hint-text < padding-bottom: 15px; text-align: center; >#responseContainer  
 
Sign Up
 
Please fill in this form to create an account!