Autor Tema: Ejemplo de envío de datos con POST Ajax Diferencia entre POST y GET CU01212F (Leído 3347 veces)

Dimitar Stefanov · « **en:** 25 de Junio 2016, 17:58 »

Buenas tardes. Propongo una posible solución del ejercicio CU01212F del curso Ajax desde cero.

Citar

EJERCICIO

Muchas validaciones se realizan del lado del cliente usando JavaScript, pero otras se realizan del lado del servidor (por ejemplo comprobar si un nombre de usuario está libre para dar de alta a un usuario, o comprobar si un correo electrónico está libre para registrar a un usuario en un foro).

Crea un documento HTML que conste de:

a) Un título H1 con el texto “Alta de usuarios”

b) Un formulario con un campo Nombre, otro Apellidos y otro Nombre de Usuario.

c) Una utilidad Ajax que informe si el nombre de usuario ya existe cada vez que el campo correspondiente a nombre del usuario pierda el foco. En ese momento deberá mostrarse un mensaje “Nombre de usuario libre” ó si no está libre, “Nombre de usuario no disponible”.

Para comprobar si ya existe el nombre de usuario debes realizar una invocación al archivo comprobarUsuarios.php donde deberás definir la lista de nombres de usuario existentes como un array php (por ejemplo puedes usar el array nombreExistente[0]='juan'; nombreExistente[1]='pedro'; nombreExistente[2]='alfredo'; nombreExistente[3]='luis' y añadir el código necesario para obtener la funcionalidad deseada.

Código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo aprenderaprogramar.com</title>
	<script type="text/javascript">
		
	function comprobarUsuario(str){
		
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState==4 && xmlhttp.status==200){
				alert(xmlhttp.response);
			}
		}

		var cadenaParametros = 'usuario='+encodeURIComponent(str);
		xmlhttp.open("POST", "CU01212F(01).php");
		xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
		xmlhttp.send(cadenaParametros);
	}

	</script>
</head>
<body>
	<h1>Alta de usuario</h1>
	<form action="">
		<label for="nombre">Nombre: <input type="text" id="nombre" name="nombre"></label><br><br>
		<label for="apellidos">Apellidos: <input type="text" id="apellidos" name="apellidos"></label><br><br>
		<label for="usuario">Nombre de Usuario: <input type="text" id="usaurio" name="usaurio" onblur="comprobarUsuario(this.value)"></label><br><br>
		<label for="submit"><input type="submit" value="Enviar"></label>
	</form>
</body>
</html>

Código PHP:

Código: [Seleccionar]

<?php 	$nombreExistente[0]='juan'; 	$nombreExistente[1]='pedro'; 	$nombreExistente[2]='alfredo'; 	$nombreExistente[3]='luis';	$usuario = $_POST['usuario'];	if($usuario == $nombreExistente[0] || $usuario == $nombreExistente[1] || $usuario == $nombreExistente[2] || $usuario == $nombreExistente[3]){		echo "Nombre de usuario no disponible";	}else{		echo "Nombre de usuario libre";	}?>

Gracias.

Mario R. Rancel · « **Respuesta #1 en:** 01 de Julio 2016, 21:55 »

Buenas noches, desde mi punto de vista correcto como solución del ejercicio. Cuidado con nombres como id="usaurio" porque te pueden generar confusiones cuando estés trabajando con miles de líneas de código.

Cuidado también con este planteamiento:

Código: [Seleccionar]

if($usuario == $nombreExistente[0] || $usuario == $nombreExistente[1] || $usuario == $nombreExistente[2] || $usuario == $nombreExistente[3]){
	echo "Nombre de usuario no disponible";
}

¿Qué ocurriría si se incrementa el número de usuarios y en lugar de 3 tuvieras 300? Pues que este código no te serviría, no sería viable escribir 300 or... en este ejercicio tanto puede hacerse como un bucle como no, pero al ver esto es natural pensar en un bucle previendo que en lugar de pocos datos pueda haber muchos.

Saludos.

Dimitar Stefanov · « **Respuesta #2 en:** 03 de Julio 2016, 13:15 »

Buenos días, Mario.

Antes que nada, gracias por otro ejercicio corregido por tu parte.

Totalmente de acuerdo contigo. Cuando entregaba este ejercicio también pensé que no era una solución válida para un código con más usuarios.

El código, utilizando bucle, quedaría así:

Código: [Seleccionar]

<?php 	$nombreExistente[0]='juan'; 	$nombreExistente[1]='pedro'; 	$nombreExistente[2]='alfredo'; 	$nombreExistente[3]='luis';	$usuario = $_POST['usuario'];	for($i=0; $i<count($nombreExistente); $i++){		if($usuario == $nombreExistente[$i]){			$resultado = $resultado + 1;		}else{			$resultado = $resultado + 0;		}	}	if($resultado == 1){		echo "Nombre de usuario no disponible";	}else{		echo "Nombre de usuario libre";	}?>

Gracias.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: