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


Если вы только начали изучать PHP и уже создавали формы для отправки данных GET и POST запросами, то наверняка задумывались: «Как обрабатывать данные и обновлять их без перезагрузки страницы?». В этой статье мы на простейшем примере покажем, как реализовать такую обработку, а поможет нам в этом AJAX.  

AJAX (Asynchronous Javascript and XML) это технология, которая позволяет web-приложениям исполнять код Javascript без перезагрузки страницы. Вернее обновляется не вся страница, а только та часть, которая нам требуется, в результате чего значительно возрастает быстродействие интерфейса.

 

Реализуем отправку данных из раскрывающегося списка, обработку этих данных на сервере, и возвращение обработанных данных обратно клиенту.

Для начала нужно импортировать библиотеку JQuery для работоспособности AJAX. Внутри тега

вашего проекта прописываем:

<script src="http://code.jquery.com/jquery-latest.js"></script>

 

Далее создаем форму с раскрывающимся списком, данные из которого нужно будет отправить и обработать:

<form method="POST" action="#" id="form-auto">
    <select name="select">

        <option value="no">
            Категория не выбрана
        </option>

        <option value="L">
            Легковые
        </option>

        <option value="G">
            Грузовые
        </option>

        <option value="S">
            Cпец.техника
        </option>

    </select>
</form>

 

AJAX работает с HTML элементами через атрибут id, поэтому не забываем прописать его нашей форме.

Вне формы создадим кнопку для отправки и блок div, в который будем выводить полученный результат:

<button name="button" onclick="send()">Отправить</button>
<div id="result"></div>

 

При нажатии на кнопку будет запускаться функция, прописываем ее название в атрибуте onclick. Задаем id для блока.

Ну и теперь перейдем к самому интересному – созданию функции.

<script>
    function send(){
        var msg = $('#form-auto').serialize();
        $.ajax({
            type:'POST',
            url:'auto_result.php',
            data:msg,
            success:function (data) {
                console.log(data);
                if (data == 'no') {
                    $('#result').html('Выберите категорию!');
                }
                if (data=='1') {
                    $('#result').html('Выбрана категория: Легковые');
                }
                if (data=='2') {
                    $('#result').html('Выбрана категория: Грузовые');
                }
                if (data=='3') {
                    $('#result').html('Выбрана категория: Спец.Техника');
                }
            }
        });
    }
</script>

 

Дадим ей название send. С помощью функции serialize преобразуем набор элементов с нашей формы в строку, пригодную для передачи в обработчик. В url пропишем путь к обработчику, который создадим позже. Передадим в data данные из msg. Происходит запрос в обработчик.

Теперь нужно создать обработчик. Имя ему мы уже задали – auto_result.php. Добавим в него следующий код:

<?php
if (!($_POST['select']=='no')){
    if ($_POST['select']=='L') {echo '1';}
    if ($_POST['select']=='G') {echo '2';}
    if ($_POST['select']=='S') {echo '3';}
} else {
    echo 'no';
} ?>

 

Данный обработчик получает данные  о категории методом POST, и отправляет номер категории клиенту. Если категория не была выбрана, то отправляется значение «no».

Вернемся к функции send. Внутри нее функция success получает номер категории, отправленный обработчиком. После этого происходит выбор выводимого сообщения на основе полученной категории.

На этом реализация простейшей динамической обработки завершена. 

 

Смотрите все самые крутые примеры по Ajax

 

 

 

Здесь может быть ваша реклама! Блок 1. Настройка рекламы в личном кабинете.
exp1 Просмотров сегодня +2 15 июня 2017
Ещё пока нет комментариев, будь первым!
Оставить комментарий
Здесь может быть ваша реклама! Блок 2. Настройка рекламы в личном кабинете.
   🔔 Отдохните не много, может Вам будет интересно прочитать статьи пользователей нашего сайта.

Как создать свою CMS или фреймворк на MVC. Часть Первая

Тег address - это обозначения контактной информации автора

Как узнать ID последней вставленной записи

Тег blockquote - это длинная цитата

Как сделать алгоритм поиска по нескольким словам на PHP из БД

Решил и я написать статью о том, как покупал сайт на бирже ТЕЛДЕРИ

Тег audio - это управление аудиофайлом

Раскрутка группы Вконтакте с помощью лайков

Как на MVC с помощью PHP и MySQL создать счетчик просмотров страниц

Тег b - это полужирный шрифт

Тег article - это статья

Ограничение символов вводимых в текстовое поле на JavaScript
Здесь может быть ваша реклама! Блок 3. Настройка рекламы в личном кабинете.

→ Магазин матрасов в Москве с доставкой по России.
→ Недорогие детские матрасы от 2215 руб!
Реклама Интернет-магазин Каталог матрасов открыт 24 часа, 7 дней в неделю!
www.catalog-matrasov.ru
→ Продажа арендованных лесных участков в РБ от 30 000 руб. Жми сейчас!
РекламаПокупая участок вы получаете выгоду, вам не нужно бегать по инстанциям и заниматься бумажной волокитой, тратя свое время. Вы сразу приобретаете ГОТОВЫЙ БИЗНЕС – лесозаготовительное предприятие.
www.svetobor.com
→ BULLET-SHOP - сварка аргоном, полуавтомат, тюнинг авто!
Реклама Ремонтируем радиаторы, интеркулеры, пайпинг и ВСЁ из алюминия, чугуна, стали с ГАРАНТИЕЙ КАЧЕСТВА. Диагностика и ремонт подвески, трансмиссии, всех узлов и агрегатов
www.bullet-shop.pro
→ Доставка товаров из Китая в кротчайшие сроки без переплат!
Реклама Вам нужен товар из Китая мы с радостью доставим его, а также поможем с выкупом товара с ТаоБао, АлиБаба, 1688.com. Помощь в переводе при заключении сделок!
www.unikorob.ru
Реклама помогает поддерживать
и развивать наш сервис.


Подробнее
(ссылка откроется в новой вкладке)