Логин  Пароль  
РЕГИСТРАЦИЯ
"MY-SKILLS"
Мои навыки.

jQuery - отправка данных AJAX. Примеры.

  1. GET запрос через AJAX
  2. POST запрос через AJAX
  3. Отправка формы через AJAX
  4. Работа с JSON
  5. Выполнение JS загруженного через AJAX
  6. Дождаться выполнения AJAX запроса
  7. Отправка HTTP заголовков
  8. Ajax - Обработка ошибок

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

GET запрос через AJAX

Например, нам нужно обратиться к файлу test.php с парамертром "testdata" и значением "test" и получить ответ сервера, что данные приняты, но без перезагрузки страницы в от личии от традиционного GET запроса как а браузерной строке "https://site.ru?testdata=test" с перезагрузкой. При удачном запросе в ответе получаем сообщение: "Успешное получение данных".

JS
view sourceprint?
1$.ajax({
2    url: '/test.php',         /* Куда пойдет запрос */
3    method: 'get',             /* Метод передачи (post или get) */
4    dataType: 'html',          /* Тип данных в ответе (xml, json, script, html). */
5    data: {testdata: 'test'},     /* Параметры передаваемые в запросе. */
6    success: function(data){   /* функция которая будет выполнена после успешного запроса.  */
7        alert(data);            /* В переменной data содержится ответ от test.php. */
8    }
9});

Или использовать сокращённую функцию $.get

JS
view sourceprint?
1$.get('/test.php', {testdata: 'Test'}, function(data){
2    alert(data);
3});

Код файла приёма данных:

PHP
view sourceprint?
1if($_GET['testdata'] == 'test'){
2  echo 'Успешное получение данных - ' . $_GET['test'];
3}

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

 

JS
view sourceprint?
1$.ajax({
2    url: '/test.php',
3    method: 'get',
4    cache: false
5});

POST запрос через AJAX

JS
view sourceprint?
01$.ajax({
02    url: '/test.php',
03    method: 'post',
04    dataType: 'html',
05    testdata: {text: 'Test'},
06    success: function(data){
07        alert(data);
08    }
09});
10 
11//Или сокращенный вариант – функция $.post
12 
13$.post('/test.php', {testdata: 'Test'}, function(data){
14    alert(data);
15});

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

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

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

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

{login: 'ЗНАЧЕНИЯ_ПОЛЯ', password: 'ЗНАЧЕНИЯ_ПОЛЯ'}.

Особенности serialize():

Кнопки формы по которым был клик игнорируются, в результате функции их не будет.

serialize можно применить только к тегу form и полям формы, т.е. $('div.form_container').serialize(); – вернет пустой результат.

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

HTML
view sourceprint?
1<div class="form_container">
2    <div id="message"></div>
3    <form id="form">
4        <input type="text" name="login">
5        <input type="text" name="password">
6        <input type="submit" name="send" value="Отправить">
7    </form>
8</div>

JS
view sourceprint?
01<script>
02$("#form").on("submit", function(){
03    $.ajax({
04        url: '/handler.php',
05        method: 'post',
06        dataType: 'html',
07        data: $(this).serialize(),
08        success: function(data){
09            $('#message').html(data);
10        }
11    });
12});
13</script>

PHP
view sourceprint?
1if (empty($_POST['login'])) {
2    echo 'Укажите логин';
3} elseif (empty($_POST['password'])) {
4    echo 'Укажите пароль';
5} else {
6    echo 'Авторизация...';
7}

Работа с JSON

Приориететное применение в случае когда в ответе нужно передать массив данных.

JS
view sourceprint?
01$.ajax({
02    url: '/json.php',
03    method: 'get',
04    dataType: 'json',
05    success: function(data){
06        alert(data.text);    /* выведет "Текст" */
07        alert(data.error);   /* выведет "Ошибка" */
08    }
09});
10 
11//Сокращённый синтаксис
12 
13$.getJSON('/json.php', function(data) {
14    alert(data.text);
15    alert(data.error);
16});

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

Код файла json.php:

JS
view sourceprint?
1header('Content-Type: application/json');
2  
3$result = array(
4    'text'  => 'Текст',
5    'error' => 'Ошибка'
6);
7  
8echo json_encode($result);

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

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

Управляющие символы в ответе JSON

Из-за них ответ считается не валидным и считается как ошибочный запрос.

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

Из-за них ответ считается не валидным и считается как ошибочный запрос.

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

PHP
view sourceprint?
1...
2  
3// Очистка буфера
4ob_end_clean();
5         
6header('Content-Type: application/json');
7echo json_encode($result, JSON_UNESCAPED_UNICODE);
8exit();

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

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

JS
view sourceprint?
1$.ajax({
2    method: 'get',
3    url: '/script.js',
4    dataType: "script"
5});
6 
7//Или короткий вариант
8 
9$.getScript('/script.js');

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

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

Пример:

JS
view sourceprint?
01var text = '';
02  
03$.ajax({
04    url: '/index.php',
05    method: 'get',
06    dataType: 'html',
07    success: function(data){
08        text = data;
09    }
10});
11  
12alert(text);  /* Переменная будет пустая. */

Переменная text будет пустая, а не как ожидается текст который вернул index.php

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

 страницы.

JS
view sourceprint?
01var text = '';
02  
03$.ajax({
04    url: '/index.php',
05    method: 'get',
06    dataType: 'html',
07    async: false,
08    success: function(data){
09        text = data;
10    }
11});
12  
13alert(text); /* В переменной будет результат из index.php. */

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

Через AJAX можно отправить заголовки HEAD, они указываются в параметре headers.

JS
view sourceprint?
1$.ajax({
2    url: '/index.php',
3    method: 'get',
4    dataType: 'html',
5    headers: {'Token_value': 123},
6    success: function(data){
7        console.dir(data);
8    }
9});

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

PHP
view sourceprint?
1<?php
2echo $_SERVER['HTTP_TOKEN_VALUE']; // 123

Ajax - Обработка ошибок.

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

JS
view sourceprint?
01$.ajax({
02    url: '/index.php',
03    method: 'get',
04    dataType: 'json',
05    success: function(data){
06        console.dir(data);
07    },
08    error: function (jqXHR, exception) {
09        if (jqXHR.status === 0) {
10            alert('Not connect. Verify Network.');
11        } else if (jqXHR.status == 404) {
12            alert('Requested page not found (404).');
13        } else if (jqXHR.status == 500) {
14            alert('Internal Server Error (500).');
15        } else if (exception === 'parsererror') {
16            alert('Requested JSON parse failed.');
17        } else if (exception === 'timeout') {
18            alert('Time out error.');
19        } else if (exception === 'abort') {
20            alert('Ajax request aborted.');
21        } else {
22            alert('Uncaught Error. ' + jqXHR.responseText);
23        }
24    }
25});

Через $.ajaxSetup можно задать обработчик ошибок для всех AJAX-запросов на сайте.

JS
view sourceprint?
1$.ajaxSetup({
2    error: function (jqXHR, exception) {
3        ...
4    }
5});

Источник: © https://snipp.ru/jquery/ajax-jquery

По теме: jQuery Form Plugin - Загрузка файлов через AJAX

Дата публикации: 

ТОП 10 случайных публикаций


    

Последние публикации

1§ Связывание таблиц MySql и выборка данных на PHP
2§ Как отследить ошибки на PHP при сборке страницы с выводом на экран
3§ Скрипт проверки хостинга на блокировку SMTP
4§ Как на PHP узнать дату и время создания файла в папке.
5§ PHP функция валидации URL ссылок
6§ htaccess правила для предотвращения исполнения вредоносных PHP-скриптов
7§ Функция PHP транслитерации текста русский в английский и обратно.
8§ Генератор QR-кода на JavaScript и qrcode.js
9§ Побуквенный вывод текста на JavaScript, css
10§ «Стоп-слова» в текстах сайта

Сайт разработан студией © WEB-VidST   


Яндекс.Метрика