Wp send json error

Возвращает JSON данные. Используется для возврата ошибок в AJAX запросах. Ответ будет всегда содержать элемент success=false. Обрывает работу php скрипта (die).

Функция также устанавливает header заголовок и обрывает работу PHP скрипта через die():

@header( 'Content-Type: application/json; charset=' . get_option( 'blog_charset' ) );

Хуков нет.

Возвращает

null. Выводит на экран данные и обрывает работу php.

// Вид возвращаемых данных, перед кодированием в JSON:
array( 'success' => false );
array( 'success' => false, 'data' => $data ); // если указан $data

Использование

wp_send_json_error( $data, $status_code, $options );

$data(строка/массив/число/объект/логический)

Данные, которые будут добавлены в результат в элемент массива data, перед кодирование в JSON.
По умолчанию: null

$status_code(число)

HTTP статус код, который нужно установить. Какие бывают статус коды, смотрите здесь. C WP 4.7.
По умолчанию: null

$options(число) (WP 5.6)

Опции которые будут переданы в функцию json_encode(). Битовая маска, составляемая из значений:

JSON_FORCE_OBJECT
JSON_HEX_QUOT
JSON_HEX_TAG
JSON_HEX_AMP
JSON_HEX_APOS
JSON_INVALID_UTF8_IGNORE
JSON_INVALID_UTF8_SUBSTITUTE
JSON_NUMERIC_CHECK
JSON_PARTIAL_OUTPUT_ON_ERROR
JSON_PRESERVE_ZERO_FRACTION
JSON_PRETTY_PRINT
JSON_UNESCAPED_LINE_TERMINATORS
JSON_UNESCAPED_SLASHES
JSON_UNESCAPED_UNICODE
JSON_THROW_ON_ERROR

Смысл этих констант объясняется на странице JSON констант.
По умолчанию: 0

Примеры

fetch( `${ pluginUrl }/ajax/save_field.php` )
	.then( resp => resp.json() )
	.then( res => {
		if( res.success ){
			alert( res.data )
		}
		// error
		else {
			alert( res.data )
		}
	} )

<?php

$nonce = $_POST['_wpnonce_name'];

// print json given success=false
if ( empty( $_POST ) || ! wp_verify_nonce( $nonce, 'my-nonce' ) ) {
	wp_send_json_error( 'Error messege' ); 
}

// it is not necessary to use die here

wp_send_json_success( 'OK message' ); 

$error = new WP_Error( 'error_code', 'ERROR: Wrong credentials.' );

wp_send_json_error( $error );

{
	success: false,
	data: [
		0: { code: 'error_code', message: 'ERROR: Wrong credentials.' }
	]
}

response.data[0].message

Send a JSON response back to an Ajax request, indicating failure.

Used to return errors in AJAX requests. The response will always contain success=false element. Terminates the php script (die).

The function also sets the header:

@header( 'Content-Type: application/json; charset=' . get_option( 'blog_charset' ) );

and die the PHP script via die().

No Hooks.

Return

null. Displays the data on the screen and terminates php.

The type of data returned, before encoding to JSON:

array( 'success' => false );

If $data parameter is specified:

array( 'success' => false, 'data' => $data );

Usage

wp_send_json_error( $data, $status_code, $options );

$data(mixed)

Data to encode as JSON, then print and die.
Default: null

$status_code(int)

The HTTP status code to output. What are the status codes, see here.
Default: null

$options(int)

Options to be passed to json_encode(). A bitmask made up of values:

JSON_FORCE_OBJECT
JSON_HEX_QUOT
JSON_HEX_TAG
JSON_HEX_AMP
JSON_HEX_APOS
JSON_INVALID_UTF8_IGNORE
JSON_INVALID_UTF8_SUBSTITUTE
JSON_NUMERIC_CHECK
JSON_PARTIAL_OUTPUT_ON_ERROR
JSON_PRESERVE_ZERO_FRACTION
JSON_PRETTY_PRINT
JSON_UNESCAPED_LINE_TERMINATORS
JSON_UNESCAPED_SLASHES
JSON_UNESCAPED_UNICODE
JSON_THROW_ON_ERROR

The meaning of these constants is explained on the JSON constants page.

Examples

$error = new WP_Error( 'error_code', 'ERROR: Wrong credentials.' );

wp_send_json_error( $error );

{
	success: false,
	data: [
		0: { code: 'error_code', message: 'ERROR: Wrong credentials.' }
	]
}

response.data[0].message

fetch( `${ pluginUrl }/ajax/save_field.php` )
	.then( resp => resp.json() )
	.then( res => {
		if( res.success ){
			alert( res.data )
		}
		// error
		else {
			alert( res.data )
		}
	} )

<?php

$nonce = $_POST['_wpnonce_name'];

// print json given success=false
if ( empty( $_POST ) || ! wp_verify_nonce( $nonce, 'my-nonce' ) ) {
	wp_send_json_error( 'Error messege' ); 
}

// it is not necessary to use die here

wp_send_json_success( 'OK message' ); 

Возвращает JSON-ответ, содержащий сведения об ошибке в обработчике AJAX-запроса WordPress. JSON-ответ содержит свойство success => false, которое мы можем затем обработать в JS.

Устанавливает в заголовке ответа Content-Type: application/json.

После вывода JSON данных работа PHP-кода внутри асинхронного запроса будет прервана функцией wp_die().

Обратите внимание, что функция предназначена для обработки скорее пользовательских ошибок типа валидации и т.д. Потому что по умолчанию она даже возвращает код ответа сервера 200. Но этот код ответа вы сможете изменить сами вторым параметром функции.

Кстати, если вы не чувствуете, что хорошо разбираетесь в асинхронных запросах WordPress, тогда я хочу порекомендовать вам свой видеокурс.

wp_send_json_error( $data = null, $status_code = null, $options = 0 )

Параметры

$data

Данные, которые нужно преобразовать в JSON. С версии 4.1.0 можно также передать объект класса WP_Error.

$status_code

(целое) Код ответа сервера. Их список можно найти здесь.

 С версии WordPress 4.7.0

$options

В этом параметре можно передать один или несколько флагов-констант, задающих правила преобразования в JSON, эти константы описаны в документации PHP.

 Использовать можно следующие константы: JSON_FORCE_OBJECT, JSON_HEX_QUOT, JSON_HEX_TAG, JSON_HEX_AMP, JSON_HEX_APOS, JSON_INVALID_UTF8_IGNORE, JSON_INVALID_UTF8_SUBSTITUTE, JSON_NUMERIC_CHECK, JSON_PARTIAL_OUTPUT_ON_ERROR, JSON_PRESERVE_ZERO_FRACTION, JSON_PRETTY_PRINT, JSON_UNESCAPED_LINE_TERMINATORS, JSON_UNESCAPED_SLASHES, JSON_UNESCAPED_UNICODE, JSON_THROW_ON_ERROR

 С версии WordPress 5.6.0

Примеры

1. Основы использования с объектом WP_Error

В качестве примера попробуем сейчас доработать тот, который я давал в описании функции wp_send_json_success().

Начнём с того, что также у нас будет какой-то JavaScript-код с отправкой AJAX-запроса.

$.ajax({
	type : 'POST',
	url : ajaxurl, // wp-admin/admin-ajax.php
	data : {
		action : 'someaction',
		// ещё какие-нибудь данные например
	},
	success : function( response ) {
		// выводим в консоль
		console.log( response );
		if( true === response.success ) {
			console.log( response.data.message );
			$( '#result' ).text( response.data.message );
		} else {
			// response.data – это массив с ошибками
			for( let i=0; i < response.data.length; i++ ) {
				console.log( 'Ошибка: ' + response.data[i].message );
			}
		}
	}
 
});

В обработчике асинхронного запроса я решил сразу показать вам, как использовать объект класса WP_Error для этой цели и добавить в него не одну, а сразу две ошибки!

add_action( 'wp_ajax_someaction', function(){
 
	/* Тут выполняется различный код, который вам нужно */
 
 	if( /* тут какая-то проверка на ошибки например */ ) {
		// создаём объект WP_Error
		$errors = new WP_Error();
		// и добавляем в него сразу две ошибки, почему бы и нет
		$errors->add( 'ip_blocked', 'С вашего IP нельзя это делать!' );
		$errors->add( 'email_failed', 'А ещё у вас email некорректный!' );
 
		wp_send_json_error( $errors );
	} else {
		wp_send_json_success( array( 'message' => 'Сохранено' ) );
	}
 
} );

В итоге в консоли получим:

2. Как работаеть с кодом ответа 500?

Чуть выше я упоминал, что несмотря на то, что это функция для отправки JSON-ответа об ошибке, она тем не менее посылает код ответа 200, типо всё хорошо.

Но мы можем послать например 500 Internal Server Error, если нужно. Делается это вот так:

wp_send_json_error( $errors, 500 );

Правда тогда мы уже не сможем вывести ошибки так, как мы это делали в предыдущем примере. Всё, что у нас будет в консоли, это:

Что же делать? Обработаем это в JS:

$.ajax({
 
	// ..... другие параметры AJAX-запроса
 
	// обработка ошибок
	error: function (xhr, ajaxOptions, thrownError) {
 
		console.log( xhr );
		console.log( thrownError );
 
		if( 500 == xhr.status ) {
			console.log( 'Ошибка 500!' );
		}
 
	}
});

Let us examine the wordpress wp_send_json_error in detail and how to use it with the assistance of our WordPress Support services at Bobcares.

WordPress wp_send_json_error

wp_send_json_error( mixed $data = null, int $status_code = null, int $options )

Return’s a JSON answer to an Ajax request to indicate failure.

If the $data parameter is a WP Error object, the errors within it are processed and output as an array of error codes and messages. The remaining types are output without further processing.

Parameters

Below given are the parameters; wordpress wp_send_json_error:

• $data mixed Optional 
• Data to encode as JSON, then print and die.
• Default: null$status_code int Optional
• The HTTP status code to output.
• Default: null$options int Optional.
• Options to be passed to json_encode(). Default 0.

The success key in the response object will always be false. If the function receives anything in the $data parameter, it will encode it as the value for a data key.

How to use wp_send_json_error in WordPress?

wordpress wp_send_json_error:  wp_send_json_error( 'Error: Invalid data!' ).

The code given above will repeat the following JSON string: {"success":false,"data":"Error: Invalid data!"}

The advantage of wp_send_JSON_error() is that the parameter can also be a WP Error object. In contrast to wp send JSON success(‘Everything is OK.’), which returns the following JSON string:

"success":true,"data":"Everything is OK".

However, if there is an error, the object is returned.

However, when we examine the JS code, we may see that we did not properly handle the JSON response.

Actually, if everything goes well, we can return HTML instead of $(‘#submitYouTubeForm’). However, with the JSON response, we do not have HTML but rather a JSON answer. 

If we don’t get the JSON string, use console.log(response). We can consider either utilizing JSON for all responses or, instead of using wp send wordpress wp_send_json_error, JSON error(), simply returning a plain HTML error message and using die().

[Need assistance with similar queries? We are here to help]

Conclusion

To conclude we have learned more about the wordpress wp_send_json_error, the various Parameters, and how to use the JSON error in WordPress with the support of our WordPress support services.

I’m having trouble understanding how wp_send_json_error works to return error messages. It works fine as long as none of the error conditions are met. But if there is an error, then nothing gets returned.

How do I return the error messages set in wp_send_json_error() when there is an error?

See my code:

function submit_youtube_callback() {
    check_ajax_referer( 'randomnonce', 'security' );

    if (    !isset($_POST['post_id']) || 
            !is_numeric($_POST['post_id']) || 
            !get_post_status($_POST['post_id']) || 

            !isset($_POST['yt_url']) ||
            !isset($_POST['terms'])
            ) {

        wp_send_json_error( 'Error: Invalid data!' );
    }

    // Check if terms are checked
    $terms = $_POST['terms'];
    if ( $terms != true ) {
        wp_send_json_error( 'Error: You must accept the terms.' );
    }

    // Check if valid youtube URL   
    $youtube_url = $_POST['yt_url'];
    $preg = '~^(?:https?://)?(?:www.)?(?:youtube.com|youtu.be)/watch?v=([^&]+)~x';
    $has_match = preg_match($preg, $youtube_url, $matches); 
    if ( empty($matches[1]) ) {
        wp_send_json_error( 'Error: You did not enter a valid YouTube URL.');
    }   

    echo '<p>youtube: '. $youtube_url .'</p>';  
    echo '<p>terms accepted: ' . $terms .'</p>';

    wp_die();
} add_action( 'wp_ajax_cp_narrations_callback', 'submit_youtube_callback' );

And Javascript:

function submit_youtube_javascript() {
    if ( is_single() ) {

        $ajax_nonce = wp_create_nonce( "randomnonce" );

        ?>
        <script>
            ( function( $ ) {
                var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>",
                    submit_youtube = $('#submitYouTubeForm');

                // Star rating button
                $(submit_youtube).on('submit', function(event) {
                    event.preventDefault();

                    var submit_youtube_url = $('#submitYouTubeURL').val(),
                    submit_youtube_terms = $('#youtube_terms').is(':checked');

                    // Data to be sent to function
                        var data = {
                            'action': 'submit_youtube_callback',
                            'security': '<?php echo $ajax_nonce; ?>',
                            'post_id': <?php echo get_the_ID(); ?>,

                            'yt_url': submit_youtube_url,
                            'terms': submit_youtube_terms
                        };

                        // Send Data
                        jQuery.post(ajaxurl, data, function(response) {
                            submit_youtube.replaceWith(response);
                        });                     
                });
            } )( jQuery );
        </script> 
        <?php
    }
} add_action( 'wp_footer', 'submit_youtube_javascript', 100 );

AJAX: Шпаргалка по AJAX на jQuery

Всем привет в новой записи мы с вами разберём основные функции для Ajax запросов, которые позволяют передавать информацию с сайта в PHP скрипт без перезагрузки страницы.

Для работы Ajax запросов вам нужно подключить jQuery к вашему проекту. Ссылку на jQuery вы можете найти здесь.

Данный взяты с моего сайта Prog-Time.

Стандартная отправка данных через Ajax.

Отправка POST запроса через Ajax

Для отправки POST запроса используем подобный код, меняем только параметр method

Отправка JSON данных через Ajax

Для отправки JSON данный через AJAX можно использовать только методом GET.

Запланировать выполнение JS скрипта

После выполнения данного запроса, скрипт указанный в параметре url сразу будет выполнен.

Сокращённые виды функций для Ajax запросов

Сокращённая версия запроса на выполнение JS скрипта

Обработка ошибок связанных с AJAX запросом

7 Основные параметры для работы с AJAX функциями

Все параметры для отправки AJAX запросов

async (по умолчанию: true).Тип: Boolean.По умолчанию, все запросы отправляются асинхронно и не задерживают работу других JS скриптов (это значение true), для того чтобы ждать пока выполниться Ajax запрос – поставьте значение false.Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение “jsonp” не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

beforeSendФункция обратного вызова, которая будет вызвана перед осуществлением AJAX запроса. Функция позволяет изменить объект jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) до его отправки. Объект jqXHR это надстройка расширяющая объект XMLHttpRequest, объект содержит множество свойств и методов, которые позволяет получить более полную информацию об ответе сервера, а так же объект содержит Promise методы. Если функция beforeSend возвращает false, то AJAX запрос будет отменен. Начиная с версии jQuery 1.5 функция beforeSend будет вызываться независимо от типа запроса.

cache (по умолчанию: true, для dataType “script” и “jsonp” false).Тип: Boolean.Если задано значение false, то это заставит запрашиваемые страницы не кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

complete.Тип: Function( jqXHR jqXHR, String textStatus ).Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий “success” или “error”). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) и строка соответствующая статусу запроса (“success”, “notmodified”, “nocontent”, “error”, “timeout”, “abort”, или “parsererror”). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

contents.Тип: PlainObject.Объект состоящий из пар строка/регулярное выражение, определяющих, как jQuery будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен в версии jQuery 1.5.

contentType (по умолчанию: “application/x-www-form-urlencoded; charset=UTF-8”).Тип: Boolean, или String.Определяет тип содержимого, которое указывается в запросе при передаче данных на сервер. С версии с jQuery 1.6 допускается указать значение false, в этом случае jQuery не передает в заголовке поле Content-Type совсем.

context.Тип: PlainObject.При выполнении AJAX функций обратного вызова контекстом их выполнения является объект window. Параметр context позволяет настроить контекст исполнения функции таким образом, что $( this ) будет ссылаться на определенный DOM элемент, или объект.

crossDomain (по умолчанию: false для запросов внутри того же домена, true для кроссдоменных запросов).Тип: Boolean.Если вы хотите сделать кроссдоменный запрос находясь на том же домене (например jsonp-запрос), то установите этот параметр в true. Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

data.Тип: PlainObject, или String, или Array.Данные, которые будут отправлены на сервер. Если они не является строкой, то преобразуются в строку запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false. Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional, который позволяет задействовать традиционный тип сериализации основанный на методе $.param).

dataFilter.Тип: Function( String data, String type ) => Anything.Функция вызывается после успешного выполнения AJAX запроса и позволяет обработать “сырые” данные, полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data – данные полученные от сервера в виде строки и type – тип этих данных (значение параметра dataType).

dataType (по умолчанию: xml, json, script, или html ).Тип: String.Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML, с версии jQuery 1.4 json будет давать объект JavaScript, script будет выполнять скрипт, а все остальное будет возвращено в виде строки).Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success):

“xml” – возвращает XML документ, который может быть обработан с помощью jQuery.

“html” – возвращает HTML как обычный текст, теги

Источник

wp_send_json_error() │ WP 3.5.0

Возвращает JSON данные. Используется для возврата ошибок в AJAX запросах. Ответ будет всегда содержать элемент success=false . Обрывает работу php скрипта (die).

Функция также устанавливает header заголовок и обрывает работу PHP скрипта через die() :

Просто вызов wp_send_json_error() не установит ответ ошибки — вместо нее вернется 200. Поэтому, если нужно указать что AJAX запрос провалился, обязательно укажите код ошибки, например 500, в параметре $status_code.

С версии 4.1. Если в параметр $data передать объект WP_Error , то он будет обработан и функция вернет массив с сообщением об ошибке. Т.е. функция понимает переданный WP_Error объект.

wp_send_json_success() — противоположная этой функция. Возвращает успешный ответ.

Возвращает

null . Выводит на экран данные и обрывает работу php.

Использование

Опции которые будут переданы в функцию json_encode(). Битовая маска, составляемая из значений:

Смысл этих констант объясняется на странице JSON констант.
По умолчанию: 0

Примеры

#1 Возврат ошибки в JSON формате при AJAX ответе

Этот jQuery код отправляет AJAX запрос на страницу плагина ajax/save_field.php :

Это код файла save_field.php , который обрабатывает переданный запрос. Здесь показано, как возвращать ошибки:

#2 Передача WP_Error в $data

В параметр $data можно передать объект WP_Error.

Теперь при получении данных в JS ответ (response) будет содержать массив всех ошибок в таком виде (обычно там всего один элемент):

Т.е. сообещние об ошибке можно получить так:

Источник

jQuery + AJAX + JSON + PHP. Пошаговое руководство

Сегодня вы узнаете, как создавать, читать, обновлять и удалять записи в базе данных. А также реализуем поиск и пагинацию. Мы будем использовать jQuery, AJAX, JSON и PHP.

• 1. Обзор проекта
• 2. Настройка REST API
• 3. Необходимые файлы и папки
• 3.1 Файловая структура
• 3.2 Создание файла index.html
• 3.3 Подключение Bootstrap
• 3.4 Создание главного CSS файла
• 3.5 Установка JavaScript-библиотек jQuery и Bootbox.js
• 3.6 Создание файла app.js
• 3.7 Создание папки «products» и файлов для будущих скриптов
• 4. Как прочитать данные в формате JSON с помощью jQuery?
• 4.1 Показать товары на странице при загрузке
• 4.2 Показать товары при клике на кнопку
• 4.3 Создание функции showProducts()
• 4.4 Получение списка товаров
• 4.5 Создание кнопки «Добавить товар»
• 4.6 Создание HTML-таблицы
• 4.7 Построение строки таблицы для каждой записи
• 4.8 Вставка контента на страницу
• 4.9 Изменение заголовка страницы
• 5. Как создать или вставить данные с помощью jQuery AJAX?
• 5.1 Обработчик нажатия кнопки «Создать товар»
• 5.2 Получение списка категорий из API
• 5.3 Создание кнопки выбора (select) категории
• 5.4 Добавление кнопки «Все товары»
• 5.5 Создание HTML-формы «Создание товара»
• 5.6 Показать форму «Создание товара» и изменить заголовок страницы
• 5.7 Обработчик кнопки «Создать товар», получение данных формы и отправка данных на сервер
• 6. Как получить данные определенного товара с помощью jQuery AJAX?
• 6.1 Обработчик кнопки «Просмотр товара»
• 6.2 Получение ID товара
• 6.3 Чтение одной записи с API
• 6.4 Добавление кнопки «Все товары»
• 6.5 Показ полных данных о товаре в таблице
• 6.6 Вывод таблицы «Просмотр товара» и изменение заголовка страницы
• 7. Как обновить данные с помощью jQuery AJAX?
• 7.1 Обработчик кнопки «Обновление товара»
• 7.2 Получение информации о товаре
• 7.3 Получение списка категорий
• 7.4 Добавление кнопки «Все товары» и показ формы для обновления товара
• 7.5 Обработчик отправки формы для обновления продукта: получение данных формы и отправка на сервер
• 8. Как удалить данные с помощью jQuery AJAX?
• 8.1 Обработчик кнопки «Удаление товара»
• 8.2 Показ диалогового окна «Подтверждение удаления»
• 8.3 Удаление записи с помощью API
• 9. Как реализовать поиск по базе данных
• 9.1 Подключение дополнительных js файлов в index.html
• 9.2 Создание файла products.js
• 9.3 Создание файла search-product.js
• 9.4 Изменение файла read-products.js
• 10. Как сделать пагинацию данных с помощью AJAX
• 10.1 Изменение URL-адреса JSON
• 10.2 Покажем товары, используя JSON URL
• 10.3 Добавим пагинацию HTML

1. Обзор проекта

Это руководство будет посвящено созданию, чтению, обновлению и удалению записей в базе данных. Мы сделаем это, используя jQuery, AJAX, JSON и PHP.

Использование AJAX предотвратит повторную загрузку всей страницы при каждом нажатии кнопки. В результате это улучшит опыт взаимодействия. Также ваше веб-приложение будет работать быстрее.

Ajax — это не технология, а группа технологий. Он может включать HTML, CSS, JavaScript и сценарии на стороне сервера, такие как PHP.

JQuery поможет нам с AJAX-частью. Данные JSON будут обрабатываться REST API, созданным с использованием PHP.

В результате вы получите такого вида приложение.

Прежде чем продолжить обучение, я настоятельно рекомендую изучить предыдущий урок — как создать простой REST API в PHP. Но если вы думаете, что вам это не нужно, тогда продолжайте изучение данной статьи.

2. Настройка REST API

В этом руководстве мы будем использовать REST API, созданный на PHP.

Исходный код REST API не был включен в данное руководство, чтобы вы сосредоточились на изучении того, как работать с технологией AJAX, а не PHP. Вы всегда можете вернуться к отдельному руководству о том, как создать простой REST API с помощью PHP. Нажмите здесь, чтобы изучить пошаговое руководство по PHP REST API.

Но если у вас уже есть собственный REST API, который будет работать с этим руководством, это тоже хорошо.

В моем случае, один из примеров, где я могу получить доступ к REST API.

По этой ссылке будет показан список продуктов из базы данных в формате JSON. Похоже на следующий скриншот.

Данные выше будут использованы нашим AJAX приложением. Список товаров будет отображаться в Bootstrap таблице с помощью кнопок «Просмотр», «Редактировать» и «Удалить». Вы увидите это в разделе данного урока «Как читать данные JSON с помощью jQuery AJAX?».

Чтобы сделать JSON-данные читаемыми в браузере Chrome, можете использовать расширение JSONView.

3. Необходимые файлы и папки

3.1 Файловая структура

• app/
  • assets/
    • css/
      • style.css
    • js/
      • bootbox.min.js
      • jquery.min.js
  • products/
    • create-product.js
    • delete-product.js
    • read-products.js
    • read-one-product.js
    • update-product.js
  • app.js
• index.html

3.2 Создание файла index.html

Создайте файл index.html в папке проекта (например, rest-api ) и внесите следующий код.

3.3 Подключение Bootstrap

Как вы можете видеть из файла index.html, мы включили Bootstrap через CDN.

Если вам нужно включить Bootstrap через загрузку, то это будет работать также.

3.4 Создание главного CSS файла

1. Создайте в корне папку app
2. В ней создайте папку assets
3. В папке assets создайте папку css
4. В папке css создайте файл style.css

Файл style.css — это наш главный файл CSS. Вы можете поместить в этот файл любой CSS для дополнительной стилизации веб-страницы. В нашем случае у нас есть следующий код CSS внутри файла style.css .

3.5 Установка JavaScript-библиотек jQuery и Bootbox.js

Откройте папку assets в папке app и создайте папку js .

В папку js мы поместим библиотеки jQuery и Bootbox.js.

Библиотека jQuery необходима, чтобы сделать наше приложение простым.
Скачайте jQuery по этой ссылке или подключите через CDN.

Библиотека Bootbox.js необходима, чтобы диалоговое окно подтверждения «удаления» выглядело лучше. Загрузите Bootbox.js по этой ссылке.

Также есть CDN для этих JavaScript библиотек. Вы можете использовать их, если хотите. Оба варианта будут работать.

3.6 Создание файла app.js

Файл app.js будет содержать некоторые основные функции HTML и JavaScript, которые могут использоваться другими JS файлами в нашем приложении.

В папке app создайте файл app.js со следующим содержимым.

3.7 Создание папки «products» и файлов для будущих скриптов

Теперь мы создадим несколько JavaScript файлов.

1. Внутри папки app создайте папку products .
2. В папке products создайте следующие файлы:

• read-products.js
• create-product.js
• read-one-product.js
• update-product.js
• delete-product.js

Пока мы оставим их пустыми. Но мы заполним их в следующих разделах этого руководства.

4. Как прочитать данные в формате JSON с помощью jQuery

4.1 Показать товары на странице при загрузке

В папке products откройте файл read-products.js .

Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.

Функция showProducts() покажет список продуктов в виде HTML-таблицы. Поместите следующий код в файл read-products.js .

4.2 Показать товары при клике на кнопку

Следующий код вызовет метод showProducts() при нажатии кнопки с классом кнопки read-products-button .

Кнопку можно найти в HTML-шаблонах «Создать товар» и «Обновить товар». Мы увидим это в следующих разделах.

Поместите следующий код под showProducts(); предыдущего раздела.

4.3 Создание функции showProducts()

Теперь мы создадим метод showProducts() . Замените комментарий // Здесь будет метод showProducts() в файле read-products.js следующим кодом.

4.4 Получение списка товаров

Следующий код свяжется с нашим API, чтобы получить список товаров в формате JSON.
Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

Как вы уже догадались, код из предыдущего руководства необходимо скопировать в наше приложение rest-api или изменить URL запроса. Ну или использовать собственный REST API для взаимодействия с нашим веб-приложением.

4.5 Создание кнопки «Добавить товар»

Мы должны добавить кнопку «Создать товар» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

4.6 Создание HTML-таблицы

Мы должны начать отрисовывать таблицу, в которой будет выводиться список товаров.

Следующий код создаст HTML-таблицу с названиями столбцов.
Разместите его после кода предыдущего раздела.

4.7 Построение строки таблицы для каждой записи

Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.

Помимо данных о товаре, строка таблицы также будет иметь кнопки «Действие». К ним относятся кнопки «Просмотр», «Редактировать» и «Удалить».

Замените комментарий // Здесь будут строки следующим кодом.

4.8 Вставка контента на страницу

Мы должны сделать так, чтобы HTML-таблица появилась на нашей веб-странице. Мы сделаем это, выводя таблицу в div page-content .

Поместите следующий код после закрывающего тега table .

4.9 Изменение заголовка страницы

Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.

Поместите следующий код после кода предыдущего раздела.

5. Как создать или вставить данные с помощью jQuery AJAX?

5.1 Обработчик нажатия кнопки «Создать товар»

Откройте в папке products файл create-product.js .

Следующий код будет обрабатывать нажатие кнопки. Эта кнопка должна иметь класс create-product-button .

5.2 Получение списка категорий из API

Нам нужно получить список категорий из API, потому что мы создадим поле выбора (select) «категории». Здесь пользователь сможет выбрать категорию продукта.

Замените // Здесь будет вызов API категорий следующим кодом.

5.3 Создание кнопки выбора категории

Здесь мы создадим тег select с опцией «Categories».

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

5.4 Добавление кнопки «Все товары»

Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку товаров.

Поместите следующий код после кода предыдущего раздела.

5.5 Создание HTML-формы «Создание товара»

Теперь мы создадим HTML-форму «Создание товара». Здесь пользователь может ввести информацию о новом продукте, которая будет отправлена на сервер.

Поместите следующий код после кода предыдущего раздела.

5.6 Показать форму «Создание товара» и изменить заголовок страницы

Мы должны сделать так, чтобы кнопка и форма появлялись на нашей веб-странице.
Также изменим заголовок страницы.

Добавьте следующий код после кода предыдущего раздела.

5.7 Обработчик кнопки «Создать товар», получение данных формы
и отправка данных на сервер

Если форма «Создание товара» отправлена, нам нужен скрипт для ее обработки.

Замените комментарий // Здесь будет обработчик «создать форму товара» следующим кодом.

6. Как получить данные определенного товара
с помощью jQuery AJAX?

6.1 Обработчик кнопки «Просмотр товара»

Кнопка «Просмотр товара» отображается в общем списке. При клике должны отображаться полные сведения о товаре.

Откройте файл read-one-product.js в папке app/products .

Добавьте следующий код.

6.2 Получение ID товара

Наш скрипт должен идентифицировать запись для чтения. Мы сделаем это путем получения идентификатора товара.

Вместо комментария // Здесь будет получение ID товара внесите следующий код.

6.3 Чтение одной записи с API

Мы отправим ID товара в API. Он вернет данные на основе данного идентификатора.

Поместите следующий код после кода предыдущего раздела.

6.4 Добавление кнопки «Все товары»

Нам нужна кнопка «Все товары» вернуться к списку всех товаров.

Замените комментарий // Здесь будет кнопка для просмотра всех товаров на следующий код.

6.5 Показ полных данных о товаре в таблице

Мы будем выводить информацию о товаре, возвращаемую из API, в HTML таблицу.

Вставьте следующий код после кода предыдущего раздела.

6.6 Вывод таблицы «Просмотр товара» и изменение заголовка страницы

Мы должны сделать так, чтобы кнопка Все товары и таблица появлялись на нашей веб-странице. А также изменим заголовок страницы.

Поместите следующий код после кода предыдущего раздела.

7. Как обновить данные с помощью jQuery AJAX?

7.1 Обработчик кнопки «Обновление товара»

Кнопка «Редактировать» находится в списке товаров. При нажатии на неё должна отображаться форма для обновления товара, заполненная информацией о нём.

В папке app/products откройте файл update-product.js и добавьте следующий код.

7.2 Получение информации о товаре

Чтобы заполнить нашу HTML-форму для обновления товара, нам нужно получить информацию о товаре из API.

Поместите следующий код после кода получения id товара.

7.3 Получение списка категорий

Список категорий необходим для вариантов категорий товаров. Записи категорий будут отображаться как параметры в поле ввода «select» HTML.

Замените комментарий // Здесь будет загрузка списка категорий следующим кодом.

7.4 Добавление кнопки «Все товары» и показ формы для обновления товара

Кнопка «Все товары» необходима, чтобы мы могли вернуться к списку продуктов.

Так же мы создадим HTML-форму для обновления товара . Эта форма будет построена с таблицей HTML, а поля ввода заполнены информацией о продукте.

Вместо комментария // Здесь будет HTML для обновления товара вставьте следующий код.

7.5 Обработчик отправки формы для обновления товара:
получение данных формы и отправка на сервер

Замените комментарий // Здесь будет обработчик для обновления товара следующим кодом.

8. Как удалить данные с помощью jQuery AJAX?

8.1 Обработчик кнопки «Удаление товара»

Кнопка «Удалить товар» отображается в представлении «Просмотр товара». Нам нужно добавить обработчик для кнопки удаления товара.

Войдите в app/products , откройте файл delete-product.js и добавьте следующий код.

8.2 Показ диалогового окна «Подтверждение удаления»

Здесь мы будем использовать библиотеку Bootbox.js . Мы покажем диалоговое окно с текстом «Вы уверены?» с кнопками «Да» и «Нет».

Поместите следующий код после кода получения ID товара.

8.3 Удаление записи с помощью API

Если пользователь нажал «Да» в диалоговом окне, то в API будет отправлен запрос «Удалить».

Замените комментарий // Здесь будет запрос на удаление на следующий код.

9. Как реализовать поиск данных с помощью jQuery AJAX?

9.1 Подключение дополнительных js файлов в index.html

9.2 Создание файла products.js

Файл products.js будет содержать любые функции, которые могут использоваться другими компонентами продукта, такими как наши файлы «read-products.js» или «search-products.js».

Откройте app/products и создайте файл products.js . Откройте его и добавьте следующий код.

9.3 Создание файла search-product.js

Файл search-product.js будет содержать код, который перехватывает отправку формы поиска товара.

Откройте app/products , создайте файл search-products.js и введите в него следующий код.

9.4 Изменение файла read-products.js

Мы хотим, чтобы «список товаров» и «поиск товаров» имели один и тот же шаблон таблицы HTML. Для этого мы будем использовать функцию readProductsTemplate() файла products.js .

Откройте папку app/product . Откройте файл read-products.js . Измените функцию showProducts() на следующий код.

10. Как сделать пагинацию данных с помощью jQuery AJAX?

Изменение URL-адреса JSON

Чтобы сделать нумерацию страниц, нам нужно изменить URL-адрес JSON.
Содержимое этих новых данных JSON будет включать узел «пагинации». Похоже на следующее.

Поэтому мы изменим URL JSON с:

Это означает, что мы должны что-то изменить в нашем коде. Смотрите изменения в следующем разделе.

10.2 Покажем товары, используя JSON

Откройте файл app/products/read-products.js и замените в нём код на следующий.

10.3 Добавим пагинацию HTML

Откройте app/products/products.js , найдите закрывающий тег table и добавьте после него следующий код.

Вам так же необходимо изменить URL домашней страницы из предыдущего руководства в соответствии с вашим URL.

Файл находится ваша_корневая_папка/api/config/core.php .

В моём случае я изменяю:

Итоговая файловая структура

После соединения backend части с frontend получаем следующую структуру.

• rest-api/
  • api/
    • config/
      • core.php
      • database.php
    • objects/
      • product.php
      • category.php
    • product/
      • create.php/
      • delete.php/
      • read.php/
      • read_paging.php/
      • read_one.php/
      • update.php/
      • search.php/
    • category/
      • read.php
    • shared/
      • utilities.php
  • app/
    • assets/
      • css/
        • style.css
      • js/
        • bootbox.min.js
        • jquery.min.js
    • products/
      • create-product.js
      • delete-product.js
      • read-products.js
      • read-one-product.js
      • update-product.js
    • app.js
  • index.html

Бэкенд часть данного приложения — RESP API PHP.

Если вам понравилась данная статья, рекомендую к прочтению создание регистрации и авторизации в php с помощью JWT.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Поделиться с друзьями:

Статьи из данной категории:

Комментарии ( 23 )

Спасибо , автор , за статьи , я правда разрабатываю на React JS , но ваша статья очень помогла понять как связать Ajax с Php . Хорошего кодинга и успехов !

в разделе 4.5 текст не закрыт кавычкой

Данный текст закрывается в 4.6 за закрывающим тегом tr

Георгий, это просто обычный input для ввода фразы поиска с name равным keywords (ключевые слова. Назван так, просто чтобы обратиться к данному input.

Георгий, да, всё верно. Такой селектор называется «селектор по атрибуту». Примеры использования: input[type=»file»] — обратиться ко всем тегам input с типом file a[href^=»#»] — обратитьcz ко всем тегам a с ссылкой начинающейся со знака #

Источник

Найти шаблон блока с равной или более высокой специфичностью,чем данный файл шаблона PHP.

Обработчик Ajax отправляет ссылку на сброс пароля.

Обработчик Ajax для включения или отключения автообновления плагинов и тем.

Ajax-обработчик для создания недостающих суб-размеров изображений для только что загруженных изображений.

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

Аякс обработчик для проверки работоспособности сайта при общении с сервером.

Ajax обработчик для проверки здоровья сайта на наличие обновлений.

Аякс-обработчик для проверки работоспособности сайтов при запросах на возврат по шлейфу.

Аякс обработчик для проверки здоровья сайта,чтобы обновить состояние результата.

Перехват Ajax-ответов страницы экспортера персональных данных для сборки файла экспорта персональных данных.

Сгенерируйте файл экспорта личных данных.

Отметьте запросы на стирание как завершенные после завершения обработки.

Обработчик Ajax для экспорта личных данных пользователя.

Аякс обработчик для стирания личных данных.

Загружает темы в интерфейс просмотра/установки темы.

Снимает блокировку изменений набора при отправке запроса на принятие команд через Ajax.

Удаляет данный автоматически созданный набор изменений или автосохраненную редакцию для данного набора изменений или удаляет блокировку набора изменений.

Обрабатывает запрос на удаление набора изменений.

Ajax обработчик для редактирования темы или файла плагина.

Обработка Ajax-запросов для общественных мероприятий

Аякс-обработчик для добавления нового поста авторефлексии.

Ajax обработчик для установки поисковых плагинов.

Аякс-обработчик для удаления плагина.

Аяксовый обработчик для поисковых плагинов.

Аякс-обработчик для установки темы.

Аякс-обработчик для обновления темы.

Аякс-обработчик для удаления темы.

Аяксовый обработчик для установки плагина.

Обрабатывает просьбу «Аякса» о возвращении предоставленных частей для запрашиваемого размещения.

Обработчик Ajax для сохранения имени пользователя WordPress.org.

Аякс-обработчик для загрузки доступных пунктов меню.

Аякс-обработчик для поиска доступных пунктов меню.

Аяксовый обработчик для обрезки изображения.

Обновляет одноразовые номера для текущего предварительного просмотра.

Аякс обработчик для создания новой категории с помощью Press This.

Аякс-обработчик для обновления плагина.

Аякс-обработчик для сохранения сообщения от нажатия кнопки «Это».

Ajax обработчик для уничтожения нескольких открытых сессий для пользователя.

Обработчик Ajax для добавления пользовательского фонового контекста к вложению.

Применить [вставить]Ajax обработчики к строке.

Аякс-обработчик для настройки изображения для вложения.

Аяксовый манипулятор для сохранения заказа на навесное оборудование.

Аякс-обработчик для отправки вложения в редактор.

Аякс-обработчик для отправки ссылки на редактор.

Аяксовый манипулятор для Heartbeat API.

Аякс-обработчик для получения различий в ревизиях.

Обработчик Ajax для автоматического сохранения выбранной цветовой схемы для собственного профиля пользователя.

Обработчик Ajax для получения тем из themes_api () .

Аяксовый обработчик для редактирования изображений.

Аякс-обработчик для сохранения сообщений из полноэкранного редактора.

Аяксовый манипулятор для получения насадки.

Аякс-обработчик для запроса вложений.

Аякс-обработчик для обновления атрибутов вложений.

Аякс-обработчик для сохранения обратно совместимых атрибутов вложений.

Аякс-обработчик для запроса сообщений для модуля «Поиск сообщений».

Получает вложение, загруженное Media Manager, обрезает его и сохраняет как новый объект. Возвращает сведения об объекте в формате JSON.

Учитывая идентификатор вложения для изображения заголовка, обновляет свою отметку времени «последнего использования» на настоящее время.

Учитывая идентификатор вложения для изображения заголовка, отменяет его как загруженное пользователем изображение заголовка для активной темы.

Обрабатывает запрос custom_save WP Ajax на сохранение/обновление набора изменений.

Обновление настроек виджета происходит асинхронно.

Чтобы обработать любой AJAX запросов в WordPress нужно зарегистрировать функцию-обработчик этого запроса через специальный хук. Вы не сможете выполнить AJAX запрос просто создав PHP-скрипт в каталоге темы или плагина, нужно именно зарегистрировать обработчик! Запрос нужно отправлять по адресу /wp-admin/admin-ajax.php и передавать в параметре action название зарегистрированного вами обработчика.

Формирование запроса

1. Формируем ссылку на обработчик AJAX запросов и задаем имя зарегистрированного обработчика:

var url = '<?= admin_url('/admin-ajax.php?action=get_posts_html') ?>'
        + '&_wpnonce=<?= wp_create_nonce('get_posts_html') ?>';

2. Напишем экшн на стороне браузера (JavaScript) для подготовки и отправки запроса:

jQuery(function($) {
  $('.btnLoadMorePosts').click(function(e) {
    // Вы также можете установить имя обработчика и ключ в $_POST параметрах
    var requestData = {
      //action: 'get_posts_html',
      //_wpnonce: '<?= wp_create_nonce('get_posts_html') ?>',
      query_args: JSON.parse('<?= json_encode($query_args) ?>'),
      my_other_params: {}
    };

    $.post(url, requestData, function(response) { // $.get OR $.post
      console.log(response);
    });
  });
});

Обработка запроса

Регистрируем хук с именем обработчика запроса (get_posts_html) в качестве суффикса:

add_action('wp_ajax_get_posts_html', 'get_posts_html_via_ajax');
add_action('wp_ajax_nopriv_get_posts_html', 'get_posts_html_via_ajax');
function get_posts_html_via_ajax() {
  if (check_ajax_referer($_REQUEST['action']) !== 1 || wp_verify_nonce($_REQUEST['_wpnonce'], $_REQUEST['action']) !== 1) {
    wp_send_json_error([
      'message' => 'Ошибка! Запрос не разрешен.'
    ]);
  }

  ob_start();
  // some action
  $html = ob_get_clean();

  wp_send_json_success([
    'html' => $html,
    'post_count' => 20
  ]);

  header('Content-Type: application/json');

  $response = [
    'success' => true,
    'data' => [
      'html' => $html,
      'post_count' => 20
    ]
  ];
  echo json_encode($response);
  die();
}

После регистрации обработчика, AJAX запрос по URL wp-admin/admin-ajax.php?action=get_posts_html запустит обработчик wp_ajax_get_posts_html.

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

Если обработчик запроса (action) не зарегистрирован — WordPress возвращает код 0, при непредвиденной ошибке -1.

Безопасность

Проверяет откуда отправили запрос:

check_ajax_referer($action, $query_arg, $die);

Сгенерить токен:

$nonce = wp_create_nonce($action);

Сформировать токен и добавить его как параметр к заданному URL:

$url = admin_url('/admin-ajax.php?action=get_posts_html');
$url = wp_nonce_url($url, 'get_posts_html');

Вспомогательные функции

Остановить выполнение и показать ошибку:

wp_die($error, $title, $args = []);

WordPress рекомендует использовать wp_die() в случае, если выполнение не должно продолжаться дальше. Но не стоит использовать эту ф-цию при любом удобном случае, вместо этого пытайтесь обработать ошибки более изящно и «без шума».

Сформировать ответ в формате JSON:

wp_send_json_success([
  'html' => 'some content'
]);

Формат ответа:

{
  success: true,
  data: {
    html: "some content"
  }
}

Прочие ф-ции:

wp_json_encode($data, $options = 0, $depth = 512);
wp_send_json($response_mixed); // Send a JSON response back to an Ajax request.
wp_send_json_success($data_mixed);
wp_send_json_error($data_mixed);

#wordpress ajax, #wp register handler for ajax request