Почему возникает ошибка 400 при ajax запросе?

Ссылка скопирована
1 ответ

Есть скрипт:

$('.lk-messages_send-button').click(function () {     const formData = new FormData();     var ajaxurl = "/wp-admin/admin-ajax.php";     formData.append('file', $('input[name="file"]')[0].files[0]);     formData.append('listing_id', listing);      var data = {         action: 'send_message_into_chat',         form_data: formData     };     console.log(data);     $.ajax({         url: ajaxurl,         type: 'POST',         data: data,         processData: false,         contentType: false,         dataType: 'json',         success: function (r) {             console.log(r);         },     }); });

$('.lk-messages_send-button').click(function () { const formData = new FormData(); var ajaxurl = "/wp-admin/admin-ajax.php"; formData.append('file', $('input[name="file"]')[0].files[0]); formData.append('listing_id', listing); var data = { action: 'send_message_into_chat', form_data: formData }; console.log(data); $.ajax({ url: ajaxurl, type: 'POST', data: data, processData: false, contentType: false, dataType: 'json', success: function (r) { console.log(r); }, }); });

функция обработчик на данный момент выглядит так:

add_action('wp_ajax_send_message_into_chat', 'send_message_into_chat'); function send_message_into_chat() { 	echo '<pre>' . print_r($_POST, 1) . '</pre>'; 	wp_die(); }

add_action('wp_ajax_send_message_into_chat', 'send_message_into_chat'); function send_message_into_chat() { echo '<pre>' . print_r($_POST, 1) . '</pre>'; wp_die(); }

При выполнении данного запроса возникает ошибка 400 Bad request. В чем может быть причина?

Дополнительно

Почему возникает ошибка 400 при ajax запросе?

Сергей delphinpro @delphinpro frontend developer

formData.append('file', $('input[name="file"]')[0].files[0]); formData.append('listing_id', listing); +formData.append('action', 'send_message_into_chat'); -var data = { -    action: 'send_message_into_chat', -    form_data: formData -}; $.ajax({         url: ajaxurl,         type: 'POST', -        data: data, +        data: formData,         processData: false,         contentType: false,         dataType: 'json',         success: function (r) {             console.log(r);         },     });

formData.append('file', $('input[name="file"]')[0].files[0]); formData.append('listing_id', listing); +formData.append('action', 'send_message_into_chat'); -var data = { - action: 'send_message_into_chat', - form_data: formData -}; $.ajax({ url: ajaxurl, type: 'POST', - data: data, + data: formData, processData: false, contentType: false, dataType: 'json', success: function (r) { console.log(r); }, });

  • Спасибо!
    Добавлю, что еще надо убрать
    dataType: 'json',
    иначе, обработчик не запускается
  • denism300, Это зависит от того, какие данные вы планируете получать. Если не json, то конечно убрать, потому что jquery в этом случае автоматически пытается распарсить ответ как json строку.
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Никита Орлов Ответ

Ошибка 400 в admin-ajax.php обычно означает, что WordPress не нашел корректный action на верхнем уровне POST-запроса или для этого action не зарегистрирован обработчик. В вашем коде action лежит рядом с form_data, а сам FormData вложен внутрь обычного объекта data. Для загрузки файла так делать нельзя: FormData должен быть передан в ajax напрямую, а action, listing_id и file должны быть добавлены внутрь этого же FormData. Тогда admin-ajax получит $_POST['action'], $_POST['listing_id'] и $_FILES['file'] в ожидаемом виде.

Исправленный JS может выглядеть так:

$('.lk-messages_send-button').on('click', function (event) {
    event.preventDefault();
 
    const input = $('input[name=file]')[0];
    const formData = new FormData();
 
    formData.append('action', 'send_message_into_chat');
    formData.append('listing_id', listing);
 
    if (input && input.files.length) {
        formData.append('file', input.files[0]);
    }
 
    $.ajax({
        url: myAjax.ajax_url,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function (response) {
            console.log(response);
        },
        error: function (xhr) {
            console.log(xhr.status, xhr.responseText);
        }
    });
});

$('.lk-messages_send-button').on('click', function (event) { event.preventDefault(); const input = $('input[name=file]')[0]; const formData = new FormData(); formData.append('action', 'send_message_into_chat'); formData.append('listing_id', listing); if (input && input.files.length) { formData.append('file', input.files[0]); } $.ajax({ url: myAjax.ajax_url, type: 'POST', data: formData, processData: false, contentType: false, dataType: 'json', success: function (response) { console.log(response); }, error: function (xhr) { console.log(xhr.status, xhr.responseText); } }); });

Адрес admin-ajax лучше не писать строкой вручную. Передайте его из PHP в скрипт, чтобы сайт корректно работал в подкаталоге, на https, в мультисайте и при нестандартном URL админки.

wp_localize_script('theme-script', 'myAjax', [
    'ajax_url' => admin_url('admin-ajax.php'),
]);

wp_localize_script('theme-script', 'myAjax', [ 'ajax_url' => admin_url('admin-ajax.php'), ]);

Обработчик в PHP должен быть зарегистрирован на тот же action. Если запрос доступен только авторизованным пользователям, достаточно wp_ajax_send_message_into_chat. Если его могут отправлять гости, нужен еще wp_ajax_nopriv_send_message_into_chat.

add_action('wp_ajax_send_message_into_chat', 'send_message_into_chat');
add_action('wp_ajax_nopriv_send_message_into_chat', 'send_message_into_chat');
 
function send_message_into_chat() {
    $listing_id = absint($_POST['listing_id'] ?? 0);
    $file = $_FILES['file'] ?? null;
 
    if (! $listing_id) {
        wp_send_json_error(['message' => 'Не передан listing_id'], 400);
    }
 
    wp_send_json_success([
        'listing_id' => $listing_id,
        'has_file' => ! empty($file),
    ]);
}

add_action('wp_ajax_send_message_into_chat', 'send_message_into_chat'); add_action('wp_ajax_nopriv_send_message_into_chat', 'send_message_into_chat'); function send_message_into_chat() { $listing_id = absint($_POST['listing_id'] ?? 0); $file = $_FILES['file'] ?? null; if (! $listing_id) { wp_send_json_error(['message' => 'Не передан listing_id'], 400); } wp_send_json_success([ 'listing_id' => $listing_id, 'has_file' => ! empty($file), ]); }

Важный момент: dataType: 'json' можно оставлять только если PHP действительно возвращает JSON через wp_send_json_success или wp_send_json_error. Если обработчик просто echo выводит HTML или текст, jQuery попытается разобрать ответ как JSON и вы получите ошибку парсинга, даже если PHP-функция отработала. Для отладки смотрите вкладку Network: у запроса должен быть payload с action=send_message_into_chat, listing_id и file, а в ответе должен быть JSON. Если action отсутствует, WordPress вернет 400 или 0, потому что не понимает, какой ajax-хук запускать.

Другие ответы (0)

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

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно