XAMPP es una solución de servidor web multiplataforma gratuita y de código abierto desarrollada por Apache Friends, que consiste principalmente en el servidor Apache HTTP, la base de datos MySQL y el intérprete de scripts escritos en el lenguaje de programación PHP. El servidor XAMPP ayuda a iniciar Apache y MySQL y conectarlos con el archivo PHP.
Enfoque: Necesitamos crear una base de datos MySQL en nuestro servidor localhost usando la herramienta phpMyAdmin . Creamos un formulario HTML que contiene campos de entrada que están vinculados con código PHP. PHP se usa para conectarse con el servidor localhost y obtener los datos de la tabla de la base de datos ejecutando las consultas de MySQL. Consulte el artículo de GFG:
Considere, tenemos una base de datos llamada gfg , una tabla llamada userdata . Para obtener datos de la base de datos sin recargar la página o enviar otros campos de entrada correspondientes a la entrada del usuario de un campo, se implementa a continuación. Los datos obtenidos se muestran en el mismo formulario HTML.
Creación de base de datos:
¿Como funciona?
El objeto XMLHttpRequest se puede usar para solicitar datos de un servidor web, actualizar una página web sin recargar la página. Puede activar la llamada en la tecla arriba, tecla abajo o en el desenfoque del primer cuadro de texto.
Ejemplo: suponga que ingresa el ID_usuario en el campo de entrada respectivo. Si el ID de usuario está presente en la base de datos, el objeto XMLHttpRequest obtiene el valor del nombre y el apellido correspondientes a ese ID de usuario de la base de datos. Reemplaza el código HTML interno de los otros cuadros de texto de entrada con los datos que obtienes en la respuesta.
Pasos para la ejecución:
Crea tu página web HTML
HTML
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
type="text/javascript">
</script>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>User Id</label>
<input type='text' name="user_id"
id='user_id' class='form-control'
placeholder='Enter user id'
onkeyup="GetDetail(this.value)" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>First Name:</label>
<input type="text" name="first_name"
id="first_name" class="form-control"
placeholder='First Name'
value="">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Last Name:</label>
<input type="text" name="last_name"
id="last_name" class="form-control"
placeholder='Last Name'
value="">
</div>
</div>
</div>
</div>
<script>
// onkeyup event will occur when the user
// release the key and calls the function
// assigned to this event
function GetDetail(str) {
if (str.length == 0) {
document.getElementById("first_name").value = "";
document.getElementById("last_name").value = "";
return;
}
else {
// Creates a new XMLHttpRequest object
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
// Defines a function to be called when
// the readyState property changes
if (this.readyState == 4 &&
this.status == 200) {
// Typical action to be performed
// when the document is ready
var myObj = JSON.parse(this.responseText);
// Returns the response data as a
// string and store this array in
// a variable assign the value
// received to first name input field
document.getElementById
("first_name").value = myObj[0];
// Assign the value received to
// last name input field
document.getElementById(
"last_name").value = myObj[1];
}
};
// xhttp.open("GET", "filename", true);
xmlhttp.open("GET", "gfg.php?user_id=" + str, true);
// Sends the request to the server
xmlhttp.send();
}
}
</script>
</body>
</html>
2. Obtenga el ID de usuario solicitado , ejecute la consulta MySQL para obtener los datos correspondientes para ese ID de usuario de la tabla de la base de datos e imprima los datos en formato JSON en el servidor en el archivo gfg.php .
PHP
<?php
// Get the user id
$user_id = $_REQUEST['user_id'];
// Database connection
$con = mysqli_connect("localhost", "root", "", "gfg");
if ($user_id !== "") {
// Get corresponding first name and
// last name for that user id
$query = mysqli_query($con, "SELECT first_name,
last_name FROM userdata WHERE user_id='$user_id'");
$row = mysqli_fetch_array($query);
// Get the first name
$first_name = $row["first_name"];
// Get the first name
$last_name = $row["last_name"];
}
// Store it in a array
$result = array("$first_name", "$last_name");
// Send in JSON encoded form
$myJSON = json_encode($result);
echo $myJSON;
?>
Producción:
Publicación traducida automáticamente
Artículo escrito por anushka10saxena y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA