Question

我已经使用jsPDF编写了一个jQuery函数，将表单转换为PDF，然后添加了一个ajax命令，目的是将生成的PDF保存到服务器。但是，当我单击“提交”时，页面似乎正在完成一项操作。但是，当我查看控制台时，会看到：

POST website.com/wp-admin/admin-ajax.php 400（错误请求）

我无法弄清楚我的代码出了什么问题。

我已经注册了我的JS，并在functions.php中使用了wp_localize：

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' );

我还再次在functions.php中添加了我的ajax命令

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);
          });
            }
          });
          }

解决这个问题的任何帮助都会很棒。我在这里看到过类似的问题，但我感觉好像已经涵盖了他们讨论的所有基础，而真正看不到我的问题

更新...

我对我的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

只需更改您在ajax请求action: 'so56917978_upload'中使用的名称的操作钩子即可

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

如果您使用localize变量而不是用ajax url: '/wp-admin/admin-ajax.php'硬编码url，那也很好，尽管这与您的问题无关，但它是一种好的做法。

编辑-

您还需要在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数据对象。

Answer 2

您的代码中几乎没有错误。

在JS代码中， url 必须为jspod.ajax_url。另外，操作必须为my_ajax_request。
不确定file_put_contents函数中为什么有双引号。另外，您可能想使用get_template_directory函数来获取路径而不是URI？

希望有帮助。

POST /wp-admin/admin-ajax.php 400（错误请求）

2 个答案: