{"id":28772,"date":"2021-05-31T10:33:00","date_gmt":"2021-05-31T07:33:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28772"},"modified":"2021-10-17T16:34:23","modified_gmt":"2021-10-17T13:34:23","slug":"como-usar-jquery-ajax-en-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/como-usar-jquery-ajax-en-wordpress\/","title":{"rendered":"C\u00f3mo usar jQuery Ajax en WordPress"},"content":{"rendered":"

\u00bfQuieres implementar jQuery Ajax en WordPress? Los principiantes de WordPress siempre encuentran dificultades al usar Ajax con WordPress. En este art\u00edculo, estudiamos c\u00f3mo usar Ajax en WordPress tomando un ejemplo en vivo.<\/p>\n

\u00bfPor qu\u00e9 necesita jQuery Ajax en el sitio web?<\/h3>\n

Ajax (JavaScript y XML as\u00edncronos) permite que una p\u00e1gina web se actualice de forma asincr\u00f3nica. Significa que los datos pueden enviarse y recuperarse de un servidor de forma asincr\u00f3nica sin interferir con la visualizaci\u00f3n y el comportamiento de la p\u00e1gina existente. Con Ajax, puede cambiar partes peque\u00f1as o grandes de una p\u00e1gina web sin actualizar toda la p\u00e1gina. Ayuda a mejorar la experiencia del usuario y al mismo tiempo ahorra una carga adicional en el servidor.<\/p>\n

Ajax se vuelve extremadamente popular en el desarrollo web. La mayor\u00eda de los sitios web prefieren usar Ajax para cargar el contenido de forma din\u00e1mica. En el desarrollo web para algunas tareas, debe tener que usar Ajax sin ninguna segunda opci\u00f3n.<\/p>\n

Dicho esto, veamos c\u00f3mo usar jQuery Ajax en WordPress.<\/p>\n

Empezando<\/h3>\n

Implementar Ajax en WordPress es f\u00e1cil y sencillo. Veremos un ejemplo pr\u00e1ctico de ello. Como ejemplo, tomemos un flujo de men\u00fas desplegables de pa\u00edses y estados. Cuando el usuario selecciona un pa\u00eds del men\u00fa desplegable, todos los estados asignados al pa\u00eds seleccionado deben completarse en el men\u00fa desplegable de estado. Este comportamiento debe ser realizado por Ajax.<\/p>\n

Para lograrlo, necesitar\u00e1 2 tablas: wp_countries y wp_states. En estas tablas, debe mantener la relaci\u00f3n de uno a muchos entre el pa\u00eds y los estados. Consulte las capturas de pantalla a continuaci\u00f3n.<\/p>\n

Tabla wp_countries<\/strong><\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Tabla wp_states<\/strong><\/p>\n

\"C\u00f3mo<\/a><\/p>\n

Una vez que est\u00e9 listo con los datos, cree el men\u00fa desplegable de pa\u00edses obteniendo los datos de la tabla de pa\u00edses de la siguiente manera.<\/p>\n

<?php\nglobal $wpdb;\n$aCountries = $wpdb->get_results( \"SELECT id, country FROM \".$wpdb->prefix.\"countries\" );\n\u00a0\n<form method=\"post\">\n\u00a0\u00a0\u00a0\u00a0<select class=\"countries\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"\">--<?php _e('SELECT COUNTRY'); ?>--<\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach ($aCountries as $country) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $country->id; ?>\"><?php echo $country->country; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0<div class=\"load-state\"><\/div>\n<\/form>\n?><\/code><\/pre>\n
Hemos agregado la clase ‘pa\u00edses’ a la etiqueta de selecci\u00f3n que se usar\u00e1 en el c\u00f3digo jQuery para obtener la identificaci\u00f3n de un pa\u00eds. Tambi\u00e9n agregu\u00e9 un div vac\u00edo con la clase ‘load-states’ al que se agregar\u00e1 el men\u00fa desplegable de estado despu\u00e9s de recibir una respuesta de la llamada Ajax.<\/p>\n
jQuery Ajax en WordPress<\/h3>\n
A continuaci\u00f3n, necesitamos escribir un c\u00f3digo jQuery que d\u00e9 una llamada Ajax al servidor y maneje la respuesta. Para escribir una llamada Ajax, debe incluir el archivo JS. Crea un custom.js<\/code>archivo dentro del js<\/code>directorio de tu tema activo. Agregue esto custom.js<\/code>en el entorno de WordPress usando el siguiente c\u00f3digo que va dentro functions.php<\/code>.<\/p>\n
function blog_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security' => wp_create_nonce( 'load_states' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'custom-script', 'blog', $script_data_array );\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'custom-script' );\n}\nadd_action( 'wp_enqueue_scripts', 'blog_scripts' );<\/code><\/pre>\n
Ahora, escribamos un c\u00f3digo jQuery que genere una llamada Ajax y agreguemos el men\u00fa desplegable de estado a la p\u00e1gina.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '.countries', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var countryid = $(this).val();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(countryid != '') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var data = {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'action': 'get_states_by_ajax',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'country': countryid,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'security': blog.security\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.post(blog.ajaxurl, data, function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.load-state').html(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Aqu\u00ed, declar\u00e9 una data<\/code>variable que contiene una action<\/code>clave. El valor de la cadena para la action<\/code>clave debe estar orientado a la tarea. Estamos obteniendo estados, as\u00ed que mantengo su nombre como get_states_by_ajax. Otros elementos de la data<\/code>variable son los detalles que se deben enviar a las solicitudes de Ajax. Nuestro objetivo es obtener un estado basado en el pa\u00eds, por lo que paso la identificaci\u00f3n del pa\u00eds con la clave como country<\/code>.<\/p>\n
Ahora es el momento de ejecutar llamadas Ajax en forma de WordPress. Agregue las siguientes 2 declaraciones en el functions.php<\/code>archivo de su tema activo .<\/p>\n
add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');\nadd_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');<\/code><\/pre>\n
‘wp_ajax’ es un prefijo fijo al usar Ajax en WordPress. Luego, agregue el valor de la acci\u00f3n. En nuestro caso es get_states_by_ajax. Entonces, el primer par\u00e1metro se convirti\u00f3 en wp_ajax_get_states_by_ajax. El segundo par\u00e1metro es una funci\u00f3n de devoluci\u00f3n de llamada en la que tenemos que escribir nuestro c\u00f3digo real del lado del servidor. Se debe usar ‘wp_ajax_nopriv’ cuando se realizan operaciones para la interfaz.<\/p>\n
En el get_states_by_ajax_callback<\/code>m\u00e9todo, escriba el c\u00f3digo que devolver\u00e1 el men\u00fa desplegable de estado. Puede definir este m\u00e9todo en el functions.php<\/code>archivo.<\/p>\n
function get_states_by_ajax_callback() {\n\u00a0\u00a0\u00a0\u00a0check_ajax_referer('load_states', 'security');\n\u00a0\u00a0\u00a0\u00a0$country = $_POST['country'];\n\u00a0\u00a0\u00a0\u00a0global $wpdb;\n\u00a0\u00a0\u00a0\u00a0$aStates = $wpdb->get_results( $wpdb->prepare( \"SELECT id, state_name FROM \".$wpdb->prefix.\"states WHERE cid = %d\", $country) );\n\u00a0\u00a0\u00a0\u00a0if ($aStates) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0foreach ($aStates as $state) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<option value=\"<?php echo $state->id; ?>\"><?php echo $state->state_name; ?><\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/select>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
La respuesta incorporada en el c\u00f3digo lo enviar\u00e1 de vuelta a jQuery. Luego agregamos esta respuesta usando jQuery al contenedor div que tiene la clase ‘load-state’.<\/p>\n
Vaya a su p\u00e1gina y elija el pa\u00eds. Deber\u00eda ver que aparece el men\u00fa desplegable de estado para el pa\u00eds seleccionado.<\/p>\n
Espero que comprenda c\u00f3mo usar Ajax en el sitio web de WordPress. Comparta sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n