Как сделать ajax запрос php

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 запрос из php

доброе утро. Проблема: на странице (главной) имеется много блоков, в которые нужно загружать список пользователей через цикл php, соответственно, загружается страница очень долго, так как ждет пока загрузятся все блоки и выполнятся все циклы. Решил сделать это с помощью ajax, но так как полный ноль в нем, не могу разобраться до конца как это работает. Нужно что бы при наведении на определенный id элемента выполнялся php скрипт (есть отдельный файл). Когда подключаю файл через include — выполняются все циклы, подключал библиотеку jquery, результата ноль. Файл подгружается сразу при загрузке страницы. Можете подсказать от чего отталкиваться, в какую сторону смотреть?

Отслеживать

задан 14 авг 2018 в 7:23

Morozov Vladyslav Morozov Vladyslav

1 1 1 серебряный знак 5 5 бронзовых знаков

$(‘#container’).mouseenter(function()< .. code . >); Как вариант что-то вроде такого?

14 авг 2018 в 7:34

Посмотрите тут (только событие у вас будет mouseenter): ru.stackoverflow.com/a/864710/212496

14 авг 2018 в 7:45

Вместо include необходимо делать AJAX-запросы к PHP, который будет выполнять код из include по этому AJAX-запросу. Подключение PHP-кода в JavaScript через include не будет делать асинхронных операций, будут выполнены сначала все PHP операции, затем полученный контент будет отправлен в браузер, и только затем будет выполняться JavaScript-код.

Простой запрос 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-м году