ajax запрос к php
Если используете jQuery, то почитайте тут документацию по использованию ajax. Там есть простые примеры.
Код по js вообще синтаксически неверно написан. Как-то так хотя бы надо:
if(res.status > 0) <
jQuery.ajax(<
type: ‘POST’,
url: ‘/file.php’,
dataType: ‘json’,
timeout: 5000,
data: ,
success: function (response) <
location.reload();
>,
error: function (jqXHR, textStatus) <
console.log(‘Error: list’);
>
>);
>
И еще, если в dataType передаете json, то и возвращать из php обязательно нужно json, иначе получите ошибку parse error
Простой запрос Ajax с помощью jQuery и PHP
Когда я начинал использовать JavaScript и JQuery, то был разочарован отсутствием простых примеров использования Ajax в jQuery.
Нужно понимать, что Ajax-запрос такой же, как и любой другой запрос. Единственным его отличием является то, что пользователю не нужно перезагружать страницу. Например, это позволит пользователю отправить данные формы без перехода на другую веб-страницу.
Обновлено: 2023-05-30 18:00:03 Сергей Бензенко автор материала
Пример запроса GET, отправленного с помощью jQuery и Ajax
$.ajax( < type: "GET", url: 'test.php', success: function(data)< alert(data); >>);
В примере кода передаются три параметра:
- type : тип HTTP запроса. В этом примере я отправляю запрос GET. Если вы хотите отправить запрос POST, измените “GET” на “POST”.
- url : адрес,на который вы хотите отправить Ajax запрос. В нашем случае это страница “test.php”. Помните, что URL-адрес указывается относительно текущей страницы.
- success : функция, которая вызывается, если запрос был успешным. Она принимает параметр data, который будет содержать вывод страницы test.php. То есть, если test.php выводит строку “OK”, то параметр data будет содержать строку “OK”.
Поэкспериментируйте с приведённым выше кодом. Например, замените“GET” на “POST” и измените URL-адрес. Можно использовать инструменты разработчика, встроенные в Firefox / Chrome для отладки Ajax- запросов. Они доступны на вкладке «Сеть». Инструменты разработчика позволяют визуализировать запрос.
Что если мы захотим добавить параметры запроса GET к Ajax-запросу?
$.ajax(< type: "GET", url: 'test.php', data: , success: function(data) < alert(data); >>);
Я добавил новый параметр data. Это объект JavaScript, содержащий данные, которые передаем в запросе. Поскольку мы отправляем запрос GET, эти параметры будут автоматически добавлены к строке запроса: test.php?name=Wayne
Пример добавления нескольких параметров GET
$.ajax(< type: "GET", url: 'test.php', data: , success: function(data) < alert(data); >>);
Приведенный выше код отправит запрос GET к test.php?name=Wayne&age=27&country=Ireland
Поэкспериментируйте с кодом, чтобы разобраться в нём. Попробуйте добавлять и удалять параметры, чтобы понять, как отправлять данные с помощью jQuery и Ajax.
А если мы хотим отправить запрос POST к файлу submission.php ?
$.ajax(< type: "POST", url: 'submission.php', data: , success: function(data) < alert(data); >>);
Я изменил тип метода (с GET на POST) и URL-адрес (на submission.php). В этом примере параметры name и age будут отправлены как переменные POST. Это означает, что на странице submission.php их можно получить с помощью следующего кода:
$name = $_POST['name']; $age = $_POST['age'];
Если использовать запрос GET, то переменные будут отправлены через строку запроса. Обратиться к ним можно следующим образом:
$name = $_GET['name']; $age = $_GET['age'];
Последней частью паззла является функция success() . Она вызывается, если Ajax-запрос завершается успешно. В примере, приведенном выше, я вывожу результат в сообщении. Но в большинстве случаев вы будете использовать эту функцию для отображения уведомлений на странице. Например, если пользователь отправляет форму с помощью Ajax, тогда эта функция применяется для проверки ответа. А также для вывода сообщения о том, что данные формы успешно отправлены на сервер.
Надеюсь, эта статья помогла вам разобраться с основами Ajax-запросов!
Сергей Бензенко автор-переводчик статьи « Simple Ajax request example with JQuery and PHP »
AJAX в WordPress. Пишем свой первый асинхронный запрос
Тут я буду рассчитывать на то, что вы базово знаете PHP, базово знаете jQuery. Тем не менее я всё равно всё буду максимально подробно объяснять по ходу дела + смотрите видеоурок.
Чтобы скачать готовый код из этого урока, вам нужно купить курс.
Шаг 1. Подготовка
Как я уже говорил, я предполагаю, что вы базово знаете jQuery, поэтому подобная конструкция для вас ясна как день ��
jQuery( function( $ ){ // есть разные варианты этой строчки, но такая мне нравится больше всего, т.к. всегда работает $( '#misha_button' ).click( function(){ // при клике на элемент с alert( 'Если это работает, уже неплохо' ); // выводим сообщение }); });
На всякий случай напомню, что должна быть подключена библиотека jQuery для этого в functions.php , но не всегда именно туда, мы добавляем строчку:
add_action( 'wp_enqueue_scripts', 'truemisha_jquery' ); function truemisha_jquery() { wp_enqueue_script( 'jquery' ); }
Подробный бесплатный видеоурок по подключению JS вы можете найти здесь.
А непосредственно наш jQuery-код пока что временно можем разместить в футере, после функции wp_footer().
() ?>
То есть библиотека jQuery теперь у нас подключена через wp_enqueue_script() либо в wp_head(), либо в wp_footer(), наша же задача закинуть наш собственный код jQuery после неё. Знаю, что мы можем сделать это через файл, мы можем сделать это через хук, а можно и просто в шаблоне вывести (у вас это возможно footer.php будет, но не факт).
В этом уроке для простоты понимания весь мой jQuery код будет находиться в файле footer.php темы. Но если вы хотите узнать, как правильно вынести его в отдельный файл, я посвятил этому время в видеоуроке.
Итак, прежде, чем переходить к следующему шагу, добейтесь вот этого ��
Шаг 2. Познакомимся с $.ajax
В jQuery есть несколько способов отправки асинхронных запросов, сам я пользуюсь только $.ajax , так как он более универсален, остальные – лишь частные случаи из него. В общих чертах, учитывая всё необходимое, код будет выглядеть вот так��
jQuery( function( $ ){ $( '#misha_button' ).click(function(){ $.ajax({ url: 'https://misha.agency/myajax.php', type: 'POST', data: 'param1=2¶m2=3', // можно также передать в виде объекта beforeSend: function( xhr ) { $( '#misha_button' ).text( 'Загрузка, 5 сек. ' ); }, success: function( data ) { $( '#misha_button' ).text( 'Отправить' ); alert( data ); } }); // если элемент – ссылка, то не забываем: // return false; }); });
Го по строчкам прокомментирую:
- 4 – абсолютный URL обработчика PHP, то есть ссылка на файл, например https://misha.agency/myajax.php
- 5 – точно так же, как и с отправкой форм, если используете POST , то для получения переменных в PHP вам нужен массив $_POST , если используете GET , то тогда будете использовать массив $_GET
- 6 – сами параметры, тут я их передал в виде урл-строки, но вы можете передавать их также в виде объекта, для объекта это будет выглядеть так:
data: { param1: 2, param2: 3 }
И соответственно, вне зависимости от того, какой вариант указания параметров вы выберете, для нашего примера они будут доступны в PHP коде (я решил назвать файл myajax.php , помним да?) при помощи $_POST[‘param1’] и $_POST[‘param2’] .
- 7-9 – это функция, которая выполнится перед отправкой запроса, тут можно годно активировать всякие прелоадеры, я вот например изменил текст кнопки .
- 11-14 – это функция запускается сразу после получения данных, а данные это… параметр этой функции конечно же, он может называться по-разному, у меня — data
- У функции $.ajax есть много прикольных параметров, я рекомендую попрактиковаться с ними, документацию можете найти на официальном сайте.
Так, теперь самая важная часть – обработка запроса в PHP. У нас с вами есть файл myajax.php , который находится в корне сайта, пусть он сложит два параметра – param1 и param2 и возвратит нам их сумму. Ну изи же? ��
$summa = $_POST['param1'] + $_POST['param2']; echo $summa; // то, что выводим, то и считается данными, возвращаемыми запросом
Прежде, чем перейти к следующему шагу, сделайте, чтобы при нажатии на кнопку у вас выводилась сумма двух параметров в alert() .
Почему мы складываем числа в PHP, когда это можно сделать непосредственно в JavaScript на стороне клиента? Потому что мы учимся, Карл! Если слишком легко для тебя, отправляйся в пост посложнее или ещё сложнее.
Шаг 3. Познакомимся со стандартным обработчиком асинронных запросов в WordPress – admin-ajax.php
Сам код отправки асинхронного запроса изменится совсем чуть-чуть:
- На 4й строчке мы указываем на путь на наш собственный файл-обработчик, а на стандартный вордпрессовский, он всегда находится в одном месте — https://misha.agency/wp-admin/admin-ajax.php (только домен моего сайта замените на свой, очень прошу). Так как я использую мой код в файле footer.php , в среде WordPress, то я могу получить путь к этому файлу динамически, например при помощи функции admin_url() или site_url().
- На 6-й строке, там где передаются параметры, обязательно нужно указать параметр action с каким-нибудь произвольным значением, которое мы будем подцеплять чуть позже.
jQuery(function($){ $('#misha_button').click(function(){ $.ajax({ url: '', type: 'POST', data: 'action=misha¶m1=2¶m2=3', // можно также передать в виде массива или объекта beforeSend: function( xhr ) { $('#misha_button').text('Загрузка, 5 сек. '); }, success: function( data ) { $('#misha_button').text('Отправить'); alert( data ); } }); // если элемент – ссылка, то не забываем: // return false; }); });
И вторым шагом нужно будет создать функцию в functions.php и повесить её на два хука (если используете AJAX в админке, то только на один кстати).
add_action( 'wp_ajax_misha', 'truemisha_ajax' ); // wp_ajax_ add_action( 'wp_ajax_nopriv_misha', 'truemisha_ajax' ); // wp_ajax_nopriv_ // первый хук для авторизованных, второй для не авторизованных пользователей function truemisha_ajax(){ $summa = $_POST[ 'param1' ] + $_POST[ 'param2' ]; echo $summa; die; // даём понять, что обработчик закончил выполнение }
Распространённые ошибки
Ошибиться можно много где угодно, но исправление ошибок тут по большей части работа с консолью браузера и понимание некоторых основных вещей.
Ничего не происходит или страница перезагружается ��
Скорее всего у вас синтаксическая ошибка в вашем JavaScript-коде, для этого мы открываем консоль браузера и смотрим, где она примерно находится и на что похожа, например:
То есть уже примерно понимаем, что к чему.
Выводится 0 вместо того, что я хочу ��
Я вас поздравляю �� — если вывелся 0, значит с вашим кодом jQuery всё прекрасно! Обычно 0 означает, что запрос к admin-ajax.php выполнился, но произошло несоответствие параметра action .
То есть в запросы вы передали одно его значение (или не передали вовсе), а в хуках wp_ajax_ и wp_ajax_nopriv_ указали другое (либо использовали не по назначению лишь один из хуков).
Кроме того, не забывайте, что в конце функции-обработчика AJAX-запроса должна быть функция die(); .
Асинхронный запрос выполняется, но вообще ничего не выводит ��
Скорее всего ошибка в PHP-коде вашего обработчика PHP, если он — это функция в functions.php , то это вряд ли пропущенная точка с запятой (тогда бы полетел весь сайт), скорее всего это просто несуществующая функция или класс.
В консоли браузера в таких случаях ошибка 500.
Купить курс
- 7 видеоуроков
- Доступ к теме курса с готовым кодом после каждого урока
- Единоразовый платёж
- Доступ навсегда
- Уроки актуальны в 2024-м году
Ajax запрос
Специальный тип поля, позволяющий вам выполнить вычисления на лету в форме записи. В поле «PHP код» введите свой собственный код, который будет выполнятся при открытии формы. Если в коде используются значения из формы, то при изменении значения в поле ввода, код будет выполнятся повторно.
Работа со значениями
Для получения значения из формы, используйте следующую конструкцию: [id поля]. Например: $distance = [379];
Для вложенной сущности, аналогичным образом можно получить значение из родительской записи.
Обратите внимание: если значения поля 379 пустое, то $distance = 0; .
Для получения id текущей записи используйте $item_id = $_GET[‘item_id’];
$_POST[‘parent_item_id’] — id родительской записи
Используйте опцию «Режим отладки» чтобы проверить код, который будет выполнятся.
Если введен текст по умолчанию, он будет отображаться, когда ajax запрос возвращает пустой ответ.
Вывод и сохранение значения в базе
Для вывода значения используйте команду echo . Вывод может быть в произвольной форме, например echo ‘‘ . $value . ‘‘;
Для сохранение значения в базе, присвойте значение в специальную переменную $form_field_value , например $form_field_value = $value;
JavaScript
Если вам необходимо присвоить полученное значение другому полю в форме, это можно сделать с помощью JavaScript кода. Пример:
echo '';
Где 13 — id поля. $value — необходимое значение.
MySql запрос
Используя функцию db_query() вы сможете построить запрос к необходимой таблице и выбрать нужные вам значения. Например:
$tariff_query = db_query("select field_389 from app_entity_35 where " . $distance . " BETWEEN field_387 and field_388",false);
Данные за определенную дату
Если в запросе вам необходимо выбрать данные за определенную дату, используйте функцию FROM_UNIXTIME(unix_timestamp,format) для сравнения дат, например:
$tariff_query = db_query("select field_389 from app_entity_35 where FROM_UNIXTIME(field_387,'%Y-%m-%d')= FROM_UNIXTIME([400],'%Y-%m-%d')",false);
field_387 — это поле дата в сущности где ищите
400 — это поле дата в форме
Значение из выпадающего списка
Пример запроса для получения значения из выпадающего списка:
$value = ''; //Переменная в которой будет хранится значение из списка $choices_id = [157]; //Получаем ID выбранного элемента из списка /* Строим запрос для получения значения из списка к таблице app_fields_choices Поле 157 - выпадающий список */ $item_query = db_query("select value from app_fields_choices where fields_id=157 and = db_fetch_array($item_query)) < $value = $item['value']; >echo $value;
Показать изображение
Пример вывода изображения из записи по идентификатору записи:
$item_id = [572]; //get record id //field_571 is Image Field in Entity 49 $item_info_query = db_query("select field_571 from app_entity_49 where = db_fetch_array($item_info_query)) < $img = $item_info['field_571']; $file = attachments::parse_filename($img); //get attachment info //check if file exist and output image if(is_file($file['file_path'])) < echo ') . ')
'; > >