POST /wp-admin/admin-ajax.php 400 (неверный запрос)

Question

Я написал функцию jQuery, использующую jsPDF для преобразования формы в PDF, затем добавил команду ajax с целью сохранения сгенерированного PDF на сервер. Однако, когда я нажимаю кнопку «Отправить», кажется, что страница завершает действие. но когда я смотрю на консоль, я вижу:

POST website.com/wp-admin/admin-ajax.php 400 (неверный запрос)

и я не могу понять, где мой код вышел из строя.

Я зарегистрировал свой JS и использовал wp_localize в functions.php:

function ASAP_scripts() {
wp_register_script('js-pod', get_stylesheet_directory_uri() . '/js/POD.js', array('jquery'),'1.1', true);
wp_enqueue_script('js-pod');
wp_localize_script( 'js-pod', 'jspod',
        array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'wp_enqueue_scripts', 'ASAP_scripts' );  

Я также добавил свои команды ajax снова в functions.php

add_action( 'wp_ajax_my_ajax_request', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_request', 'so56917978_upload_callback' );
function so56917978_upload_callback() {
    if ( ! empty( $_POST['data'] ) ) {
        $data = base64_decode($_POST['data']);
        file_put_contents( "get_stylesheet_directory_uri() . '/POD/pod.pdf' ", $data );
        echo "success";
    } else {
        echo "No Data Sent";
    }

    die;
}

Мой JQuery:

function sendToServer() {  
          html2canvas(document.getElementById("product_sheet"), {
            onrendered: function(canvas)
            {
          console.log("#submit clicked");

          var img = canvas.toDataURL("image/png");
          var doc = new jsPDF('p', 'pt', 'a4');
          doc.addImage(img, 'JPEG',20,20);
          var file = doc.output('blob');
          var pdf = new FormData();     // To carry on your data  
          pdf.append('mypdf',file);

          $.ajax({
            url: '/wp-admin/admin-ajax.php',   //here is also a problem, depends on your 
            data: {
              action: 'so56917978_upload', // Action name.
              data: pdf,
            },
            dataType: 'text',
            processData: false,
            contentType: false,
            type: 'POST',
          }).done(function(data){
            console.log(data);
          });
            }
          });
          }

Любая помощь в решении этого была бы великолепна. Я видел подобные вопросы здесь, но мне кажется, что я охватил все основы, которые они обсуждают, и искренне не вижу своей проблемы

Обновление ...

Обновление ...

Я немного изменил MY JS, похоже, он работает лучше и лучше, чем ожидалось, однако я все еще получаю «данные не отправляются». Таким образом, запрос ajax, кажется, работает. но, похоже, что в PHP что-то может помешать его завершению?

JS

function sendToServer() { 
            html2canvas(document.getElementById("product_sheet"), {
            onrendered: function(canvas)
            {
          console.log("#pdfsubmit clicked");

                function html() {
                    var img = canvas.toDataURL("image/png");
                    var doc = new jsPDF('p', 'pt', 'a4' );
                    doc.addImage(img, 'JPEG', 20, 20);

                    var pdf = doc.output('blob');
                    $.ajax({
                        url: jspod.ajax_url,
                        type: 'post',
                        async: false,
                        contentType: 'application/json; charset=utf-8',
                        data:{
                            data: pdf
                            action:'so56917978_upload'
                        },
                        dataType: 'json'
                    });
                }
            });
        }
    }

PHP:

add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload' );
add_action( 'wp_ajax_nopriv_so56917978_upload', 'so56917978_upload' );
function so56917978_upload() {
    if ( ! empty( $_POST['action'] ) ) {
        $data = base64_decode($_POST['action']); 
        file_put_contents( get_template_directory() . '/POD/pod.pdf' , $data );
        echo "success";
    } else {
        echo "No Data Sent";
    }

    die();
}

Answer 1

В коде есть несколько ошибок.

1. В коде JS url должно быть jspod.ajax_url.Кроме того, действие должно быть my_ajax_request.

2. Не уверен, почему в функции file_put_contents есть двойные кавычки.Также вы можете использовать get_template_directory функцию для получения пути, а не URI?

Надеюсь, это поможет.

Answer 2

просто измените свои хуки действий с именем, которое вы использовали в запросе ajax action: 'so56917978_upload'

add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload' );
add_action( 'wp_ajax_nopriv_so56917978_upload', 'so56917978_upload' );

также было бы хорошо, если бы вы использовали localize переменную вместо жесткого кодирования URL в ajax url: '/wp-admin/admin-ajax.php', хотя это не имеет ничего общего с вашей проблемой, но это хорошая практика.

РЕДАКТИРОВАТЬ -

вам также нужно добавить действие в FormData, а затем в ajax вам нужно передать этот объект pdf в объект данных, так что в основном ваш код будет выглядеть следующим образом

pdf.append('action', 'so56917978_upload');

$.ajax({
    url: jspod.ajax_url,   //here is also a problem, depends on your 
    data: pdf,
    dataType: 'text',
    processData: false,
    contentType: false,
    type: 'POST',
}).done(function (data) {
    console.log(data);
});

где pdf.append('action', 'so56917978_upload'); добавит действие в ваш объект FormData. data: pdf, и это поле в ajax будет содержать объект данных PDF.