Un usuario preguntó 👇
Estoy corriendo en un servidor compartido y, como resultado, no tengo acceso de root al servidor. Estoy usando jsPDF para convertir el formulario enviado de HTML a PDF. Esto funciona muy bien y no hay problemas para descargar en el lado del cliente a su navegador.
Sin embargo, quería usar Ajax para guardar el PDF en una carpeta seleccionada en mi directorio, pero seguía recibiendo el error POST https://website.co.uk/wp-admin/admin-ajax.php 400 Ingresé mi código en el flujo de acciones y nadie puede decirme dónde me equivoqué y espero ser más feliz aquí 🙂
Primero, agregué: En functions.php:
function ASAP_scripts() {
/** All of my other scripts are also registered here**/
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' );También en functions.php:
add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_so56917978_upload', '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();
}El JS utilizó:
function sendToServer() {
html2canvas(document.getElementById("product_sheet"), {
onrendered: function(canvas){
console.log("#pdfsubmit clicked");
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',
contentType: false,
processData: false,
data:{
data: pdf,
action:'so56917978_upload',
},
dataType: 'json',
});
}
});
}Probé diferentes cosas con el JS anterior como:
convertir dataType en ‘Text’ contentType en ‘application / json charset = utf-8’
Así como muchos otros. Estaría muy agradecido si alguien pudiera dar un consejo sobre dónde me equivoqué.
Este tema fue modificado hace 1 año, 6 meses por. Este tema fue modificado hace 1 año, 6 meses por.
(@bcworkz)
Hace 1 año, 6 meses
Recomiendo agregar una recuperación «exitosa» a su llamada .ajax () para que pueda ver la salida del servidor. No resolverá su pregunta, pero también podría ser útil.
Si se trata de un script de back-end, entonces wp_enqueue_scripts es el gancho equivocado, necesita admin_enqueue_scripts.
Sospecho que algo en so56917978_upload_callback () está fallando, lo que da como resultado el error 400. Todo lo demás se ve bien si es por la parte delantera. Verifique comentando a todos dentro de la función excepto a la llamada a la muerte (). Si agregó una recuperación de «éxito», puede repetir «Recibido» para asegurarse de que se llamó a la función, o error_log () algo si desea verificar esa ruta. Comience a volver a ingresar el código hasta que la solicitud falle nuevamente. Hay un problema con el último código agregado.
(@suplementogenie)
Hace 1 año, 6 meses
Disculpe @bcworkz, soy nuevo en esto y no estoy seguro de cómo volver a agregar éxito, ¿podría aconsejarme sobre la mejor manera de hacerlo?
Además, mencioné todo en el php para morir () pero aún obtengo el mismo error 400:
add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_so56917978_upload', '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();
}Cambio la cola en functions.php a
function admin_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( 'admin_enqueue_scripts', 'admin_scripts' )Esta respuesta fue modificada hace 1 año, 6 meses.
(@bcworkz)
Hace 1 año, 6 meses
He incluido un ejemplo de recuperación exitosa con el código .ajax () a continuación, que funciona (!). También moví el valor de los datos de «actividad» a la URL y eso parece marcar la diferencia en mi prueba de su código. Esa es una idea de por qué. La prueba que hice no incluye ningún otro dato como PDF. El contenido de mi función de recuperación de PHP es simplemente:
echo 'got there';
die;El código .ajax () que funciona:
$.ajax({
url: jspod.ajax_url+'?action=so56917978_upload',
type: 'POST',
contentType: false,
processData: false,
data:{
data: 'pdf'
},
/*dataType: 'json',*/
success: function(response, status) {
alert(response);
}
});Comenté sobre el tipo de datos JST debido a mi simple recuperación de PHP que devuelve texto sin formato, no JSON. No hay ningún error 400 con el argumento tipo de datos, pero evita que la alerta de éxito funcione correctamente. Si todo estuviera configurado para manejar JSON, probablemente estaría bien.
Por supuesto, todo esto no hace nada, pero al menos hay algún tipo de datos que hacen que un viaje preciso sea exitoso y sin errores. Le recomiendo que vuelva gradualmente a la funcionalidad real, probando con frecuencia. Entonces, siempre que falle, la fuente se determinará fácilmente.
(@suplementogenie)
Hace 1 año, 6 meses
@bcworkz He revisado el código como se sugirió anteriormente.
Recibo una respuesta 200 ahora, pero ese no es el caso admin-ajax.php se muestra en la red como admin-ajax.php?action=so56917978_upload
Además, ya no recibo ningún mensaje en la consola, pero parpadea en la parte superior diciendo No Data Sent Normalmente en una consola. Eso también me diría eso.
Y finalmente … cuando reviso la red dice en la parte inferior:
Request Payload
[object object]Si quieres mirar, la dirección es: eazyfreight.co.uk/pod
(@suplementogenie)
Hace 1 año, 6 meses
gustaria:
var xhr = new XMLHttpRequest();
xhr.open( ‘post’, ‘ajax-php-link’, true );
xhr.send(data);¿Trabaja mejor?
Esta respuesta fue modificada hace 1 año, 6 meses.
(@bcworkz)
Hace 1 año, 6 meses
Se esperaba todo el comportamiento informado. Mi código de muestra requiere modificaciones para hacer algo realmente útil. admin-ajax.php? action = so56917978_upload necesita solicitar WP para ver el valor que necesita para formar un gancho de acción. Puede cambiar la línea de alerta a console.log(response); para evitar la ventana emergente y ver la respuesta en la consola.
Estamos lanzando un objeto JS como .ajax () data: argumento, la carga salarial. Es por eso que WP no pudo «ver» el valor de una acción como parte de ese objeto. PHP parece tener problemas para ejecutar este objeto. No suelo usar .ajax (), hay algo extraño en cómo envía datos que no entiendo. Normalmente uso .post () donde el objeto de datos pasado se maneja perfectamente:
$.post( jspod.ajax_url,{
data: 'pdf',
action: 'so56917978_upload'
}, function(response, status) {
console.log(response);
});Puede utilizar un objeto XMLHttpRequest si lo desea. No se supone que haga ninguna diferencia. Pero .ajax () y .post () tampoco están destinados a hacer ninguna diferencia. Las versiones de jQuery suelen ser más fáciles de trabajar, pero no se espera que sean ciertas para .ajax (). Usa lo que funcione, especialmente si lo entiendes mejor.
(@suplementogenie)
Hace 1 año, 6 meses
@bcworkz Para ser honesto, todo esto es nuevo para mí. Actualmente estoy estudiando desarrollo de software, pero he hecho mucho más en Python que en JS.
He adaptado el código de demanda de lo que encontré en línea, así que cuando se trata de modificar este tipo de código, tengo problemas.
Hasta donde puedo llegar, el [object object] se devuelve porque PHP no puede averiguar lo que envié, por lo que está obteniendo algo, pero no se puede decodificar.
Gracias por su ayuda para superar el error 400. Tendré que investigar mucho sobre esto para averiguar cómo solucionarlo.
(@bcworkz)
Hace 1 año, 6 meses
Yo mismo soy relativamente débil con jQuery. PHP es lo principal que hago en estos días. Cuando usé .ajax () en el pasado para lanzar un objeto FormData, PHP lo manejó perfectamente. Hay algo en las cosas anónimas que nos falta. Al menos tenemos algo que funciona.
Le recomiendo que tome mi código de muestra .post () y envíe la salida jsPDF en lugar de mi 'pdf'. Restaure su controlador PHP Ajax, quizás sin el condicional if ( ! empty()) en el presente. Probablemente esté bien escribir en una carpeta de temas, pero es probable que se ejecute con problemas de permisos. Intentaría escribir en / wp-content / uploads / (WP_CONTENT_DIR.'/uploads/') inicialmente solo para estar seguro. Puede probar la carpeta de temas más tarde si todo lo demás falla. (Tengo una pregunta sobre si una carpeta de temas es el destino correcto de todos modos, pero esa es una pregunta separada).
En realidad, pensándolo bien, deje el 'pdf' de ahora en adelante y garantizar el éxito de la escritura de archivos de texto sin formato. Comente sobre la línea de decodificación de 64 bases para esta prueba inicial. Recoger el valor de file_put_contents(). Si es así false, repita el mensaje de error apropiado para la recuperación exitosa de jQuery para consolar el mensaje. Una vez que el texto ‘pdf’ se pueda escribir correctamente, intente enviar la salida jsPDF.
(@suplementogenie)
Hace 1 año, 6 meses
@bcworkz He modificado ligeramente mi código (solo JS, PHP es el mismo que en la pregunta inicial) Me preguntaba si podía ver algo que pudiera ayudarme a resolver esto.
Cambié el JS a:
function make_product_sheet() {
console.log("#pdfsubmit clicked");
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById("product_sheet"), function() {
ps_filename = "generated-product-sheet";
var file = btoa(pdf.output());
var formData = new FormData();
formData.append('data', file);
$.ajax({
url: jspod.ajax_url+'?action=so56917978_upload',
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
});
}Recibo el mensaje ahora Success Got There
Sin embargo, no puedo ver el archivo en la carpeta nombrada.
cuando exploro un elemento y cuando selecciono la pestaña de red y cuando selecciono admin-ajax.php y me desplazo hasta la parte inferior, veo formData – detalles: … y consta de una cadena base64 de letras y números aleatorios
es decir.
FormData datos: PGP JVBERi0xLjMKJbrfrOAKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFIKL1Jlc291cmNlcyAyIDAgUgovTWVkaWFCb3ggWzAgMCA1OTUuMjggODQxLjg5XQovQ29udGVudHMgNCAwIFIKPj4KZW5kb2JqCjQgMCBvYmoKPDwKL0xlbmd0aCA1Mgo ……….
Tengo entendido que el PHP anterior debería decodificar esto y ponerlo en la carpeta correspondiente.
(@bcworkz)
Hace 1 año, 6 meses
Escribir en la carpeta del tema puede tener un problema de permisos. Intente escribir en contenido de wp.
Si eso no ayuda, debe realizar una depuración de retención de PHP. Es difícil depurar llamadas Ajax a través de Ajax. Recomiendo hacer un script PHP para probar directamente la recuperación. Cree una plantilla de página personalizada para hacer esto. Entonces solo necesita cargar la página relacionada para ejecutar el código. Pídale a su código de prueba base64 que codifique texto sin formato y complete $ _POST[‘data’], luego llame a la función directamente (o use do_action ()).
Luego, puede generar datos de depuración desde el controlador Ajax y se mostrarán en la página. Asegúrese de que los datos ingresados en $ _POST estén decodificados correctamente. Recopile el valor del resultado de file_put_contents () y bórrelo. Si la devolución es falsa, probablemente habrá un problema de permiso. Si se devuelve un número, PHP cree que escribió en un archivo en algún lugar. Asegúrese de que el camino sea hacia donde cree que está.
(@suplementogenie)
Hace 1 año, 5 meses
@bcworkz
Resolví mi problema con …
PHP:
add_action( 'wp_ajax_so56917978_upload', 'so56917978_upload_callback' );
add_action( 'wp_ajax_nopriv_so56917978_upload', 'so56917978_upload_callback' );
function so56917978_upload_callback() {
$res = [
'saved' => 0,
];
if ( ! empty( $_POST['data'] ) ) {
$pdf = get_stylesheet_directory() . '/POD/pod.pdf';
$data = base64_decode($_POST['data']);
file_put_contents( $pdf, $data );
$res['pdf'] = $pdf;
$res['saved'] = 1;
} else{
$res['error'] = 'No Data Sent';
}
wp_send_json( $res );
}jQuery
jQuery( "#pdfsubmit" ).click(function() {
var $form = $("form[name='pdf-download']"),
$successMsg = $(".alert");
$.validator.addMethod("letters", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Zs]*$/);
});
$form.validate({
rules: {
firstname: {
required: true,
minlength: 3,
letters: true
},
lastname: {
required: true,
minlength: 3,
letters: true
},
email_id: {
required: true,
email: true
}
},
messagess: {
firstname: "Please specify your first name (only letters and spaces are allowed)",
lastname: "Please specify your last name (only letters and spaces are allowed)",
email_id: "Please specify a valid email address"
},
submitHandler: function sendToServer() {
console.log("#pdfsubmit clicked");
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML(document.getElementById("product_sheet"), function() {
var file = btoa(pdf.output());
var formData = new FormData();
formData.append('data', file);
$.ajax({
url: jspod.ajax_url + '?action=so56917978_upload',
data: formData,
processData: false,
contentType: false,
debug:true,
type: 'POST',
success: function(data) {
alert(data);
}
});
});
}
});
});Ese también es el código completo para la verificación de formularios.
gracias por la ayuda que diste 🙂 tengo lol
¿Solucionó tu problema??
0 / 0