Tenemos nuestros dos archivos, el archivo a.php
que es nuestra vista y el archivo b.php
que es la lógica del servidor.
Supongamos que en tu archivo a.php
tienes el siguiente contenido directamente en alguna parte de tu archivo:
window.onload = ()=>{
const button = document.getElementById("enviar");
const form = document.getElementById("formEnviarDatos");
const nombre = document.getElementsByName("nombre")[0];
const edad = document.getElementsByName("edad")[0];
button.addEventListener("click", e =>{
//Prevenimos que nos lleve al archivo b.php
e.preventDefault();
//Obtenemos lo que el usuario puso en los input y lo añadimos a data
//Que sera enviada por ajax al archivo b.php
const dataToSend = new FormData();
dataToSend.append("nombre", nombre.value);
dataToSend.append("edad", edad.value);
//Creamos una nueva peticion ajax:
const ajax = new XMLHttpRequest();
//Cuando b.php nos devuelva una respuesta la usamos en a.php
ajax.onload = ()=>{
const responseData = JSON.parse(ajax.response);
alert(responseData.msg);
}
ajax.onerror = ()=>{
alert("Ha ocurrido un error en la peticion!");
}
//Abrimos la peticion hacia b.php y la enviamos.
ajax.open("POST", form.action);
ajax.send(dataToSend);
});
}
<form action = "b.php" id = "formEnviarDatos">
<input type = "text" name = "nombre" placeholder = "nombre"><br>
<label for = "edad">edad: </label><input type = "number" name = "edad" value = "0"><br>
<button id = "enviar">Enviar!</button>
</form>
Este formulario debes analizarlo muy bien, por ejemplo en el action
del form pusimos b.php
el cual es el archivo que se encarga de procesar tu data, y en javascript extraemos el contenido del atributo action para poder enviar datos por medio de ajax
a traves de una peticion POST
hacia el archivo b.php
.
en b.php tendrias:
<?php
/*
Obtenemos los valores enviados por POST aquí en este archivo,
estos son los campos que yo decidí usar para obtener en este archivo
sin embargo tu puedes mandar hacia aca cualquier otro tipo de info
y se recibe de esta manera puesto que usamos POST, de lo contrario
debes usar GET, si enviaste los datos por GET.
*/
$nombre = $_POST["nombre"];
$edad = $_POST["edad"];
//Esto sera enviado devuelta como respuesta a tu archivo a.php en ajax
//cuando se ejecute la funcion onload (se ejecuta automaticamente al enviar)
//la peticion ajax desde a.php
$response;
$message;
//Haces los procesos usuales de mirar si en la base de datos
//existe o no ya un rol igual, supongamos que tu ya guardaste esta
//info en una variable:
$existe = true;
//si existe enviamos un contenido, si no enviamos otro, por supuesto deberas
//usar la variable $Rol que ya poseias en tu codigo original.
if($existe){
$message = "El Rol " . $Rol . " ya existe";
}else{
$message = "Rol añadido con exito!";
}
//Esto es lo que realmente se encargara de enviarte una respuesta como json
//hacia el archivo a.php como respuesta de ajax.
echo json_encode(["msg" => $message]);
?>
En caso de que no estes familiarizado con el formato json
, esto deberas consultarlo en una pregunta aparte, puesto que este tema es muy extenso, de hecho tengo una respuesta acerca de el formato JSON
, por si deseas verla adjuntare la respuesta en los comentarios.