Cómo insertar datos en la base de datos en WordPress usando Ajax
Publicado: 2021-12-30
¿Está buscando una forma de insertar datos en una base de datos en WordPress usando Ajax? Siga leyendo, ya que compartiremos los sencillos pasos que debe seguir para lograrlo.
Es importante tener en cuenta que necesita algunas habilidades de codificación para implementar esta solución. Sin embargo, intentaremos explicar cada paso en detalle para describir cómo puede implementar la solución en su sitio de WordPress.
Ajax significa enviar datos a la base de datos o servidor, sin recargar la página. Esto asegura que el visitante no abandone su sitio web o la página actual. Además, ahorra mucho tiempo, especialmente al completar un formulario grande.
Entremos directamente en ello.
Resumen
- Crear un formulario
- Tome todos los datos del formulario usando JQuery y envíe datos a través de Ajax
- Obtener e insertar datos en la base de datos
Crear un formulario
El primer paso es crear el formulario. Al enviar el formulario a través de la solicitud Ajax en WordPress, puede enviar datos a través de Ajax y acceder a la función dentro de su tema a través de la URL admin_url('admin-ajax.php'); para llegar al administrador de forma segura.
Puede obtener más información sobre esta URL en la documentación de Ajax proporcionada por WordPress.
Para crear el formulario, copia y pega este código donde quieras mostrarlo. Puede mostrarlo en el archivo index.php, single.php, page.php o incluso 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>
Tome todos los datos del formulario usando JQuery y envíe datos a través de Ajax
En esta sección, usaremos jQuery para lograr el resultado. Alternativamente, también puede usar JavaScript estándar para lograr el mismo resultado.
Antes de continuar, recuerde tomar nota de la variable de acción dentro del objeto de datos dentro de la función $.ajax(). Esto se debe a que usaremos la función dentro de la función 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);
}
});
})
El código anterior garantiza que los datos se envíen a Ajax, una vez que haga clic en el botón Enviar. Necesitamos obtener los valores dentro de functions.php del tema usando la función ajax de WordPress.
Obtener e insertar datos en la base de datos
Primero, escribamos la función Ajax de WordPress para obtener los datos e insertarlos en la base de datos.
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
La cadena en el código anterior consta de dos partes principales. Son nopriv y save_post_details_form.
La parte nopriv significa que Ajax fallará si el usuario ha iniciado sesión. Sin embargo, si el usuario no ha iniciado sesión, el activador de Ajax funciona.
El save_post_details_form es lo que escribimos en el código JavaScript dentro de $.ajax() en el objeto de datos. Vale la pena mencionar que la función no funcionará si no se combina correctamente.
El otro argumento en la función add_action es el nombre de la función para tomar los datos y hacer lo que queramos.
El último paso es devolver la acción verdadera o falsa según el resultado y mostrarla en la interfaz.
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";
}
}
Es importante tener en cuenta que puede personalizar el mensaje para mostrar una salida diferente.
Conclusión
En esta breve publicación, hemos compartido cómo puede insertar datos en una base de datos en WordPress usando Ajax. La condición 'if else' en la última sección hará el truco dentro de Ajax y puede hacer que el mensaje de resultado sea más descriptivo.
Si no puede implementar esta solución, no dude en contactarnos. Si comete algún error, puede desglosar su sitio.
Esperamos que esta publicación lo haya ayudado a aprender cómo enviar datos en la base de datos sin recargar la página.
Artículos similares
- Cómo obtener barras laterales registradas WordPress con bucle Foreach
- Cómo mostrar el nombre de la categoría en WordPress usando un ejemplo práctico
- Cómo obtener información de usuario iniciada en WordPress
- Cómo crear un campo de casilla de verificación en la página de pago de WooCommerce