{"id":28063,"date":"2021-05-31T10:43:00","date_gmt":"2021-05-31T07:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28063"},"modified":"2021-10-18T04:05:55","modified_gmt":"2021-10-18T01:05:55","slug":"como-usar-jquery-ajax-no-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-usar-jquery-ajax-no-wordpress\/","title":{"rendered":"Como usar jQuery Ajax no WordPress"},"content":{"rendered":"

Voc\u00ea quer implementar jQuery Ajax no WordPress? Iniciantes em WordPress sempre encontram dificuldades em usar Ajax com WordPress. Neste artigo, estudamos como usar Ajax no WordPress tomando um exemplo ao vivo.<\/p>\n

Por que precisa de jQuery Ajax no site?<\/h3>\n

Ajax (Asynchronous JavaScript And XML) permite que uma p\u00e1gina da web seja atualizada de forma ass\u00edncrona. Isso significa que os dados podem ser enviados e recuperados de um servidor de maneira ass\u00edncrona, sem interferir na exibi\u00e7\u00e3o e no comportamento da p\u00e1gina existente. Usando Ajax, voc\u00ea pode alterar partes pequenas ou grandes de uma p\u00e1gina da web sem atualizar a p\u00e1gina inteira. Isso ajuda a melhorar a experi\u00eancia do usu\u00e1rio e ao mesmo tempo economiza uma carga extra no servidor.<\/p>\n

Ajax se tornou extremamente popular no desenvolvimento web. A maioria dos sites prefere usar Ajax para carregar o conte\u00fado dinamicamente. No desenvolvimento da web para algumas tarefas, voc\u00ea deve usar Ajax sem qualquer segunda op\u00e7\u00e3o.<\/p>\n

Dito isso, vamos ver como usar jQuery Ajax no WordPress.<\/p>\n

Come\u00e7ando<\/h3>\n

Implementar Ajax no WordPress \u00e9 f\u00e1cil e direto. Veremos um exemplo pr\u00e1tico disso. Como exemplo, vamos pegar um fluxo de listas suspensas de pa\u00eds e estado. Quando o usu\u00e1rio seleciona um pa\u00eds na lista suspensa, todos os estados atribu\u00eddos ao pa\u00eds selecionado devem ser preenchidos na lista suspensa de estados. Este comportamento deve ser feito pelo Ajax.<\/p>\n

Para alcan\u00e7\u00e1-lo, voc\u00ea precisar\u00e1 de 2 tabelas – wp_countries e wp_states. Nessas tabelas, voc\u00ea deve manter a rela\u00e7\u00e3o de um para muitos entre o pa\u00eds e os estados. Consulte as imagens abaixo.<\/p>\n

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

\"Como<\/a><\/p>\n

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

\"Como<\/a><\/p>\n

Quando estiver pronto com os dados, crie a lista suspensa de pa\u00edses obtendo os dados da tabela de pa\u00edses da seguinte forma.<\/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
Adicionamos a classe ‘pa\u00edses’ \u00e0 tag de sele\u00e7\u00e3o que ser\u00e1 usada no c\u00f3digo jQuery para obter o id de um pa\u00eds. Eu tamb\u00e9m adicionei um div vazio com a classe ‘load-states’ ao qual a lista suspensa de estado ser\u00e1 anexada ap\u00f3s receber uma resposta da chamada Ajax.<\/p>\n
jQuery Ajax no WordPress<\/h3>\n
Em seguida, precisamos escrever um c\u00f3digo jQuery que forne\u00e7a uma chamada Ajax para o servidor e manipule a resposta. Para escrever uma chamada Ajax, voc\u00ea deve incluir o arquivo JS. Crie um custom.js<\/code>arquivo dentro do js<\/code>diret\u00f3rio do seu tema ativo. Adicione isso custom.js<\/code>no ambiente WordPress usando o c\u00f3digo abaixo que vai 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
Agora, vamos escrever um c\u00f3digo jQuery que fornece uma chamada Ajax e anexar o menu suspenso de estado \u00e0 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
Aqui, declarei uma data<\/code>vari\u00e1vel que cont\u00e9m uma action<\/code>chave. O valor da string para a action<\/code>chave deve ser orientado \u00e0 tarefa. Estamos buscando estados, ent\u00e3o mantenho seu nome como get_states_by_ajax. Outros elementos da data<\/code>vari\u00e1vel s\u00e3o os detalhes que devem ser enviados \u00e0s solicita\u00e7\u00f5es Ajax. Nosso objetivo \u00e9 buscar um estado com base no pa\u00eds, ent\u00e3o estou passando o id do pa\u00eds com a chave como country<\/code>.<\/p>\n
Agora \u00e9 hora de executar chamadas Ajax no modo WordPress. Adicione as 2 declara\u00e7\u00f5es abaixo no functions.php<\/code>arquivo do seu tema ativo .<\/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’ \u00e9 um prefixo fixo ao usar Ajax no WordPress. Em seguida, anexe o valor da a\u00e7\u00e3o a ele. Em nosso caso, \u00e9 get_states_by_ajax. Portanto, o primeiro par\u00e2metro tornou-se wp_ajax_get_states_by_ajax. O segundo par\u00e2metro \u00e9 uma fun\u00e7\u00e3o de retorno de chamada na qual temos que escrever nosso c\u00f3digo real do lado do servidor. ‘wp_ajax_nopriv’ deve ser usado quando voc\u00ea est\u00e1 fazendo opera\u00e7\u00f5es para o front end.<\/p>\n
No get_states_by_ajax_callback<\/code>m\u00e9todo, escreva o c\u00f3digo que retornar\u00e1 o menu suspenso de estado. Voc\u00ea pode definir este m\u00e9todo no functions.php<\/code>arquivo.<\/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
A resposta embutida no c\u00f3digo o enviar\u00e1 de volta ao jQuery. Em seguida, anexamos essa resposta usando jQuery ao cont\u00eainer div que possui a classe ‘load-state’.<\/p>\n
V\u00e1 at\u00e9 sua p\u00e1gina e escolha o pa\u00eds. Voc\u00ea deve ver a lista suspensa de estado para o pa\u00eds selecionado.<\/p>\n
Espero que voc\u00ea entenda como usar Ajax no site WordPress. Por favor, compartilhe seus pensamentos e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n