Como inserir dados no banco de dados no WordPress usando Ajax
Publicados: 2021-12-30
Você está procurando uma maneira de inserir dados em um banco de dados no WordPress usando Ajax? Continue lendo, pois compartilharemos as etapas simples que você precisa seguir para conseguir isso.
É importante observar que você precisa de algumas habilidades de codificação para implementar esta solução. No entanto, tentaremos explicar cada etapa detalhadamente para descrever como você pode implementar a solução em seu site WordPress.
Ajax significa enviar dados para o banco de dados ou servidor, sem recarregar a página. Isso garante que o visitante não saia do seu site ou da página atual. Além disso, economiza muito tempo, especialmente ao preencher um formulário grande.
Vamos direto ao assunto.
Resumo
- Criar um formulário
- Pegue todos os dados do formulário usando JQuery e envie dados pelo Ajax
- Buscar e inserir dados no banco de dados
Criar um formulário
O primeiro passo é criar o formulário. Ao enviar o formulário através de requisição Ajax no WordPress, você pode enviar dados via Ajax e acessar a função dentro do seu tema através da URL admin_url('admin-ajax.php'); para alcançar o administrador com segurança.
Você pode saber mais sobre esse URL na documentação do Ajax fornecida pelo WordPress.
Para criar o formulário, copie e cole este código onde você deseja exibi-lo. Você pode exibi-lo no arquivo index.php, single.php, page.php ou mesmo sidebar.php.
<div class="container">
<h1>WordPress AJAX Insert Post Demo</h1>
<form id="enquiry_email_form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data">
<div class="form-group">
<label for="">Enter Title</label>
<input type="text" class="form-control" name="post_title" id="post_title" placeholder="Enter Title" />
</div>
<div class="form-group">
<label for="">Enter Description</label>
<textarea name="post_description" id="post_description" cols="30" rows="10" class="form-control" placeholder="Enter Post Description"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Submit</button>
</div>
</form>
</div>
Pegue todos os dados do formulário usando JQuery e envie dados sobre Ajax
Nesta seção, usaremos jQuery para obter o resultado. Como alternativa, você também pode usar o JavaScript vanilla para obter o mesmo resultado.
Antes de continuar, lembre-se de observar a variável de ação dentro do objeto de dados dentro da função $.ajax(). Isso porque usaremos a função dentro da função Ajax.
$("#enquiry_email_form").on("submit", function (event) {
event.preventDefault();
var form= $(this);
var ajaxurl = form.data("url");
var detail_info = {
post_title: form.find("#post_title").val(),
post_description: form.find("#post_description").val()
}
if(detail_info.post_title === "" || detail_info.post_description === "") {
alert("Fields cannot be blank");
return;
}
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
post_details : detail_info,
action: 'save_post_details_form' // this is going to be used inside wordpress functions.php
},
error: function(error) {
alert("Insert Failed" + error);
},
success: function(response) {
alert("Insert Success" + response);
}
});
})
O código acima garante que os dados sejam enviados para o Ajax, assim que você clicar no botão enviar. Precisamos buscar os valores dentro do functions.php do tema usando a função ajax do WordPress.
Buscar e inserir dados no banco de dados
Primeiro, vamos escrever a função WordPress Ajax para pegar os dados e inseri-los no banco de dados.
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
A string no código acima consiste em duas partes principais. Eles são nopriv e save_post_details_form.
A parte nopriv significa que o Ajax falhará se o usuário estiver logado. No entanto, se o usuário não estiver logado, o gatilho Ajax funcionará.
O save_post_details_form é o que escrevemos no código JavaScript dentro de $.ajax() no objeto de dados. Vale ressaltar que a função não funcionará se não for correspondida corretamente.
O outro argumento na função add_action é o nome da função para pegar os dados e fazer o que quisermos.
A última etapa é retornar a ação true ou false dependendo do resultado e exibi-la no front-end.
function save_enquiry_form_action() {
$post_title = $_POST['post_details']['post_title'];
$post_description = $_POST['post_details']['post_description'];
$args = [
'post_title'=> $post_title,
'post_content'=>$post_description,
'post_status'=> 'publish',
'post_type'=>post',
'post_date'=> get_the_date()
];
$is_post_inserted = wp_insert_post($args);
if($is_post_inserted) {
return "success";
} else {
return "failed";
}
}
É importante observar que você pode personalizar a mensagem para exibir uma saída diferente.
Conclusão
Neste breve post, compartilhamos como você pode inserir dados em um banco de dados no WordPress usando Ajax. A condição 'if else' na última seção fará o truque dentro do Ajax e você poderá tornar a mensagem de resultado mais descritiva.
Se não conseguir implementar esta solução, não hesite em contactar-nos. Se você cometer algum erro, você pode quebrar seu site.
Esperamos que este post tenha ajudado você a aprender como enviar dados no banco de dados sem recarregar a página.
Artigos semelhantes
- Como obter barras laterais registradas no WordPress com loop Foreach
- Como exibir o nome da categoria no WordPress usando um exemplo prático
- Como obter informações do usuário logado no WordPress
- Como criar um campo de caixa de seleção na página de checkout do WooCommerce