Como usar jQuery Ajax no WordPress
Você 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.
Por que precisa de jQuery Ajax no site?
Ajax (Asynchronous JavaScript And XML) permite que uma página da web seja atualizada de forma assíncrona. Isso significa que os dados podem ser enviados e recuperados de um servidor de maneira assíncrona, sem interferir na exibição e no comportamento da página existente. Usando Ajax, você pode alterar partes pequenas ou grandes de uma página da web sem atualizar a página inteira. Isso ajuda a melhorar a experiência do usuário e ao mesmo tempo economiza uma carga extra no servidor.
Ajax se tornou extremamente popular no desenvolvimento web. A maioria dos sites prefere usar Ajax para carregar o conteúdo dinamicamente. No desenvolvimento da web para algumas tarefas, você deve usar Ajax sem qualquer segunda opção.
Dito isso, vamos ver como usar jQuery Ajax no WordPress.
Começando
Implementar Ajax no WordPress é fácil e direto. Veremos um exemplo prático disso. Como exemplo, vamos pegar um fluxo de listas suspensas de país e estado. Quando o usuário seleciona um país na lista suspensa, todos os estados atribuídos ao país selecionado devem ser preenchidos na lista suspensa de estados. Este comportamento deve ser feito pelo Ajax.
Para alcançá-lo, você precisará de 2 tabelas – wp_countries e wp_states. Nessas tabelas, você deve manter a relação de um para muitos entre o país e os estados. Consulte as imagens abaixo.
Tabela wp_countries
Tabela wp_states
Quando estiver pronto com os dados, crie a lista suspensa de países obtendo os dados da tabela de países da seguinte forma.
<?php
global $wpdb;
$aCountries = $wpdb->get_results( "SELECT id, country FROM ".$wpdb->prefix."countries" );
<form method="post">
<select class="countries">
<option value="">--<?php _e('SELECT COUNTRY'); ?>--</option>
<?php foreach ($aCountries as $country) { ?>
<option value="<?php echo $country->id; ?>"><?php echo $country->country; ?></option>
<?php } ?>
</select>
<div class="load-state"></div>
</form>
?>Adicionamos a classe ‘países’ à tag de seleção que será usada no código jQuery para obter o id de um país. Eu também adicionei um div vazio com a classe ‘load-states’ ao qual a lista suspensa de estado será anexada após receber uma resposta da chamada Ajax.
jQuery Ajax no WordPress
Em seguida, precisamos escrever um código jQuery que forneça uma chamada Ajax para o servidor e manipule a resposta. Para escrever uma chamada Ajax, você deve incluir o arquivo JS. Crie um custom.jsarquivo dentro do jsdiretório do seu tema ativo. Adicione isso custom.jsno ambiente WordPress usando o código abaixo que vai dentro functions.php.
function blog_scripts() {
// Register the script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_states' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );Agora, vamos escrever um código jQuery que fornece uma chamada Ajax e anexar o menu suspenso de estado à página.
custom.js
jQuery(function($) {
$('body').on('change', '.countries', function() {
var countryid = $(this).val();
if(countryid != '') {
var data = {
'action': 'get_states_by_ajax',
'country': countryid,
'security': blog.security
}
$.post(blog.ajaxurl, data, function(response) {
$('.load-state').html(response);
});
}
});
});Aqui, declarei uma datavariável que contém uma actionchave. O valor da string para a actionchave deve ser orientado à tarefa. Estamos buscando estados, então mantenho seu nome como get_states_by_ajax. Outros elementos da datavariável são os detalhes que devem ser enviados às solicitações Ajax. Nosso objetivo é buscar um estado com base no país, então estou passando o id do país com a chave como country.
Agora é hora de executar chamadas Ajax no modo WordPress. Adicione as 2 declarações abaixo no functions.phparquivo do seu tema ativo .
add_action('wp_ajax_get_states_by_ajax', 'get_states_by_ajax_callback');
add_action('wp_ajax_nopriv_get_states_by_ajax', 'get_states_by_ajax_callback');‘wp_ajax’ é um prefixo fixo ao usar Ajax no WordPress. Em seguida, anexe o valor da ação a ele. Em nosso caso, é get_states_by_ajax. Portanto, o primeiro parâmetro tornou-se wp_ajax_get_states_by_ajax. O segundo parâmetro é uma função de retorno de chamada na qual temos que escrever nosso código real do lado do servidor. ‘wp_ajax_nopriv’ deve ser usado quando você está fazendo operações para o front end.
No get_states_by_ajax_callbackmétodo, escreva o código que retornará o menu suspenso de estado. Você pode definir este método no functions.phparquivo.
function get_states_by_ajax_callback() {
check_ajax_referer('load_states', 'security');
$country = $_POST['country'];
global $wpdb;
$aStates = $wpdb->get_results( $wpdb->prepare( "SELECT id, state_name FROM ".$wpdb->prefix."states WHERE cid = %d", $country) );
if ($aStates) {
?>
<select>
<?php
foreach ($aStates as $state) {
?>
<option value="<?php echo $state->id; ?>"><?php echo $state->state_name; ?></option>
<?php
}
?>
</select>
<?php
}
wp_die();
}A resposta embutida no código o enviará de volta ao jQuery. Em seguida, anexamos essa resposta usando jQuery ao contêiner div que possui a classe ‘load-state’.
Vá até sua página e escolha o país. Você deve ver a lista suspensa de estado para o país selecionado.
Espero que você entenda como usar Ajax no site WordPress. Por favor, compartilhe seus pensamentos e sugestões na seção de comentários abaixo.
Artigos relacionados
- Como carregar uma postagem do WordPress com AJAX
- Como integrar o upload de arquivos Ajax no WordPress
- Como usar o jQuery Autocomplete com Ajax