AJAX es una t\u00e9cnica que puede usar en Javascript para obtener datos del servidor y actualizar el contenido de su p\u00e1gina sin recargarla en su navegador. En esta publicaci\u00f3n, profundizaremos en c\u00f3mo usar correctamente AJAX en WordPress.<\/p>\n
La mayor\u00eda de ustedes probablemente est\u00e9 familiarizado con la realizaci\u00f3n de solicitudes AJAX fuera de WordPress y quiera ver c\u00f3mo hacerlo en WordPress. Es posible que se est\u00e9 preguntando acerca de las siguientes preguntas:<\/p>\n
En WordPress puede realizar solicitudes AJAX en admin y\/o frontend; el proceso es el mismo con algunas diferencias al responder las preguntas anteriores. \u00a1Vamos a sumergirnos!<\/p>\n
Lo primero que necesita es, obviamente, el javascript donde desea enviar la solicitud AJAX. Debe ponerse en cola usando un m\u00e9todo v\u00e1lido para agregar scripts a WordPress<\/a>, ya sea frontend o backend. Lo m\u00e1s probable es que ya tenga un script configurado donde solo necesita la parte de enviar o solicitar algo de WordPress.<\/p>\n Publicar AJAX en WordPress requiere que pase una variable de objeto Javascript como datos a la solicitud. En el objeto, debe proporcionar como m\u00ednimo una propiedad; ‘ Cuando se trata de responder la pregunta 1 anterior: \u00bfa qu\u00e9 URL debe enviar su solicitud AJAX? Esto difiere dependiendo de si su secuencia de comandos est\u00e1 en cola en el administrador o en la interfaz. Debido a que AJAX ya est\u00e1 integrado en las pantallas de administraci\u00f3n de WordPress, simplemente puede usar la variable global Para manejar las solicitudes de AJAX en PHP, se conecta a la acci\u00f3n Vamos a sumergirnos directamente en el c\u00f3digo. Comenzaremos con c\u00f3mo agregar solicitudes AJAX en el panel de administraci\u00f3n.<\/p>\n Supongo que ya tiene un script en cola que reacciona a alguna acci\u00f3n del usuario, recopila datos y est\u00e1 listo para realizar una solicitud AJAX, ya sea para actualizar algo o para solicitar informaci\u00f3n de WordPress. El siguiente c\u00f3digo es un ejemplo muy simplificado; el c\u00f3digo pone en cola un archivo Javascript en el tema para el administrador, y dentro del c\u00f3digo Javascript configura algunas variables aleatorias, ejecuta AJAX en la carga de la p\u00e1gina y genera la respuesta en la consola.<\/p>\n Como puede ver en el c\u00f3digo Javascript anterior, configura un objeto Javascript (piense en \u00e9l como una matriz) con todos los datos que desea transmitir, incluida la importante Tambi\u00e9n como se mencion\u00f3 anteriormente, dado que AJAX ya est\u00e1 integrado en las pantallas de administraci\u00f3n de WordPress, simplemente use la variable global Ahora agregaremos c\u00f3digo para aceptar esta solicitud AJAX en PHP. Debido a que proporcion\u00e9 ‘ Dentro de su funci\u00f3n enganchada, tiene acceso completo a WordPress; puede usar cualquier funci\u00f3n de WordPress, consultas y acceder a variables globales (por ejemplo Es opcional devolver algo a Javascript (por ejemplo, cuando solo desea enviar una solicitud para actualizar o guardar algo y no necesita confirmaci\u00f3n). Si desea devolver algo, simplemente Una nota final importante en la \u00faltima l\u00ednea; El proceso de ejecutar AJAX en la interfaz es el mismo que en el administrador, pero algo m\u00e1s complicado al responder la pregunta 1: en qu\u00e9 URL debe publicar AJAX. En el ejemplo anterior para ejecutar AJAX en el administrador, ya ten\u00edamos una variable Javascript global Al poner en cola un script de interfaz que realizar\u00e1 solicitudes AJAX en su tema o complemento, debe pasar la URL AJAX de WordPress como variable a ese Javascript, mediante el uso de Ahora, en su Javascript, tiene acceso a un objeto Javascript global Cuando se trata de AJAX en la interfaz, hay una cosa m\u00e1s a tener en cuenta con respecto al enlace que usa para aceptar solicitudes de AJAX. Todav\u00eda se conecta a En cuanto al contenido de su funci\u00f3n enganchada de AJAX, es el mismo que para las solicitudes de administrador. Tienes acceso completo a WordPress, obtienes las variables pasadas de Debido a que AJAX hace que sea tan f\u00e1cil pasar datos entre el script y el backend, definitivamente debe tomar las medidas necesarias para que su c\u00f3digo sea seguro. Eso incluye desinfectar cualquier dato antes de guardarlo, pero tambi\u00e9n utilizar la funcionalidad "nonce" de WordPress para verificar si las solicitudes provienen de ubicaciones correctas y aceptadas. Lea la documentaci\u00f3n de<\/a> WordPress de inmediato si no est\u00e1 familiarizado con ella.<\/p>\n La premisa b\u00e1sica es esta; utiliza un m\u00e9todo de WordPress generando un valor nonce ( Agreguemos algo de seguridad al c\u00f3digo de ejemplo que hicimos arriba. Primero generaremos un nonce y lo pasaremos Lo que se pasa como ‘ Y finalmente, en nuestra action<\/code>‘. El valor de la action<\/code>propiedad ‘ ‘ es una cadena que puede ser (casi) cualquier cosa que desee. Esta acci\u00f3n es lo que le dice a WordPress c\u00f3mo enrutar la solicitud AJAX. Pero tambi\u00e9n define parte del nombre del enlace al que deber\u00e1 conectarse en PHP para manejar la solicitud AJAX.<\/p>\najaxurl<\/code>. Pero para las solicitudes de interfaz, se vuelve un poco m\u00e1s complicado porque debe proporcionar la URL de AJAX manualmente junto con su Javascript. M\u00e1s sobre eso a continuaci\u00f3n.<\/p>\nwp_ajax_<your action name><\/code>. Si desea ejecutar solicitudes AJAX en la interfaz para usuarios que no han iniciado sesi\u00f3n, tambi\u00e9n puede conectarse a wp_ajax_nopriv_<your action name><\/code>. M\u00e1s sobre eso a continuaci\u00f3n. Dentro de su funci\u00f3n enganchada, puede acceder a los datos pasados \u200b\u200bdesde Javascript haciendo referencia a la $_POST<\/code>matriz. Para devolver algo, simplemente repite algo. Esa es la respuesta corta a la pregunta 2 anterior.<\/p>\nRealizaci\u00f3n de solicitudes AJAX en el administrador de WordPress<\/h2>\n
add_action('admin_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-script', get_stylesheet_directory_uri(). '\/assets\/js\/awhitepixel-ajax.js', ['jquery'], '', true);\n});<\/code><\/pre>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_send_something',\n 'something': 'Hello world',\n 'another_thing': 14\n }\n $.post(ajaxurl, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\naction<\/code>propiedad ‘ ‘.<\/p>\najaxurl<\/code>como URL de AJAX.<\/p>\nawhitepixel_send_something<\/code>‘ como valor de ‘ action<\/code>‘, necesito conectarme a wp_ajax_awhitepixel_send_something<\/code>.<\/p>\nadd_action('wp_ajax_awhitepixel_send_something', function() {\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n\u00a0\n wp_die();\n});<\/code><\/pre>\n$wpdb<\/code>, para consultas de bases de datos). Todas las variables que pas\u00f3 en Javascript estar\u00e1n disponibles dentro $_POST<\/code>de la matriz con las claves que proporcion\u00f3 en el objeto de Javascript.<\/p>\necho<\/code>su salida. Para generar variables m\u00e1s complejas que simplemente una cadena, debe devolverlo como una matriz codificada json para que Javascript pueda leerlo y analizarlo correctamente. Algo como esto;<\/p>\n$pass_back = ['something' => 'a value', 'another_thing' => 42];\necho json_encode($pass_back);<\/code><\/pre>\nwp_die()<\/code>. Todas las funciones de devoluci\u00f3n de llamada de AJAX deben "cerrar el hilo" o terminar correctamente haciendo die()<\/code>o exit()<\/code>. En WordPress usamos wp_die()<\/code>para una integraci\u00f3n adecuada, pero el resultado es el mismo. Si obtiene un "0" extra\u00f1o en sus respuestas de AJAX, es muy probable que sea porque no lo hizo wp_die()<\/code>o die()<\/code>Siempre, siempre aseg\u00farese de "morir" al final de todas las funciones conectadas a wp_ajax<\/code>.<\/p>\nRealizaci\u00f3n de solicitudes AJAX en la interfaz de WordPress<\/h2>\n
ajaxurl<\/code>, pero esta variable no est\u00e1 disponible en la interfaz. Tenemos que proporcionarlo nosotros mismos. Para obtener el valor de la URL AJAX de WordPress que usa admin_url('admin-ajax.php')<\/code>(s\u00ed, "url de administrador" para la interfaz).<\/p>\nwp_localize_script()<\/code>.<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php')\n ];\n wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\nTheme_Variables<\/code>(este nombre puede ser el que desee), con la URL AJAX de WordPress como valor para ajax_url<\/code>la propiedad ‘ ‘. Su funci\u00f3n AJAX ser\u00eda algo como esto:<\/p>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_frontend_stuff',\n 'something': 'Hello world',\n 'another_thing': 14\n }\n $.post(Theme_Variables.ajax_url, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\nwp_ajax_<your action name><\/code>, pero este enlace solo funcionar\u00e1 para los visitantes que hayan iniciado sesi\u00f3n. Si desea realizar solicitudes AJAX para los visitantes que no han iniciado sesi\u00f3n, debe (tambi\u00e9n) conectarse a wp_ajax_nopriv_<your action name><\/code>. Normalmente, para las solicitudes AJAX de frontend que se requieren para que el tema funcione correctamente, se conectar\u00eda a ambos, apunt\u00e1ndolos a la misma funci\u00f3n.<\/p>\nadd_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n wp_die();\n}<\/code><\/pre>\n$_POST<\/code>, opcionalmente devuelves algo ejecutando echo<\/code>, y siempre, siempre debes recordar "morir" wp_die()<\/code>al final.<\/p>\nAsegurar sus solicitudes AJAX<\/h2>\n
wp_create_nonce()<\/code>) o generando un campo de entrada oculto con el valor nonce como valor (wp_nonce_field()<\/code>). En su solicitud de AJAX, pasa el valor de nonce (que est\u00e1 codificado por WordPress) en la solicitud, y en la parte de aceptaci\u00f3n (wp_ajax_<\/code>gancho) verifica el nonce con lo que configur\u00f3 originalmente.<\/p>\nwp_localize_script<\/code>junto con la URL de AJAX. Como par\u00e1metro wp_create_nonce()<\/code>, establecemos una cadena \u00fanica que solo nosotros deber\u00edamos conocer, por as\u00ed decirlo. En el ejemplo a continuaci\u00f3n, voy por ‘ awhitepixel-nonce<\/code>‘.<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('awhitepixel-ajaxscript', get_stylesheet_directory_uri(). '\/assets\/js\/frontendajax.js', ['jquery']);\n $variable_to_js = [\n 'ajax_url' => admin_url('admin-ajax.php'),\n 'nonce' => wp_create_nonce('awhitepixel-nonce')\n ];\n wp_localize_script('awhitepixel-ajaxscript', 'Theme_Variables', $variable_to_js);\n});<\/code><\/pre>\nnonce<\/code>‘ en nuestras variables de Javascript a la interfaz es un n\u00famero aleatorio generado por WordPress. Nadie m\u00e1s que nosotros, los autores de este script, sabemos que el nonce v\u00e1lido es ‘ awhitepixel-nonce<\/code>‘. En nuestro Javascript, tomamos el valor de nonce y lo devolvemos directamente en nuestra solicitud AJAX:<\/p>\njQuery(document).ready(function($) {\n var data = {\n 'action': 'awhitepixel_frontend_stuff',\n 'something': 'Hello world',\n 'another_thing': 14,\n 'nonce': Theme_Variables.nonce\n }\n $.post(Theme_Variables.ajax_url, data, function(response) {\n console.log(response);\n });\n});<\/code><\/pre>\nwp_ajax<\/code>funci\u00f3n enganchada, deber\u00edamos comenzar comprobando si el nonce era v\u00e1lido con wp_verify_nonce()<\/code>. Proporcionamos la cadena \u00fanica que configuramos anteriormente, y si WordPress no coincide con el valor codificado \u00fanico transmitido con esta cadena, terminamos inmediatamente:<\/p>\nadd_action('wp_ajax_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nadd_action('wp_ajax_nopriv_awhitepixel_frontend_stuff', 'awhitepixel_ajax_frontend');\nfunction awhitepixel_ajax_frontend() {\n if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'awhitepixel-nonce')) {\n wp_die(-1);\n }\n\u00a0\n $something = $_POST['something'];\n $another_thing = (int) $_POST['another_thing'];\n\u00a0\n echo 'You sent '. $something. ' with '. $another_thing;\n wp_die();\n}<\/code><\/pre>\n