realizo esta consulta de jQuery AJAX, porque estoy haciendo una prueba de PHP, AJAX, JQUERY, El asunto es que intento realizar una petición al servidor de enviar datos de los campos de usuario y contraseña pero al momento de enviar los datos, siempre se me va a error en vez de success, en $.ajax(), Nosé que pasa aquí?
//Codigo jQuery 3.3.1
$('#send').click(function(){
$.ajax({
method:'post',
url:'login.php',
datatype: 'html',
data: user : {$('#user').val()},
success : function(response){
$('.alertArea p').text(response);
},
error : $('.alertArea p').text("Hubo un error al enviar los datos.!");
});
});
/*Codigo CSS */
*{
margin: 0;
padding: 0;
}
input{
padding: 10px;
}
h2{
font-family: "trebuchet ms";
}
.alertArea{
display: none;
}
.alertArea p{
background: #333;
}
<!-- Codigo HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stl.css">
<title>Formulario de imagenes</title>
</head>
<body>
<form method="post" align="center" id="form">
<h2>Inicie sesión</h2>
<hr>
<br>
<div class="alertArea">
<p></p>
</div>
<input type="text" placeholder="Nombre de usuario" name="user" id="user">
<input type="password" placeholder="Contraseña" name="pass">
<button id="send">Enviar</button>
</form>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="js.js"></script>
</body>
</html>
<?php
include('conexion.php');
$usuario = $_POST['user'];
$contrasena = $_POST['pass'];
echo "Los datos son : 'Usuario : $usuario' , 'Contrasena : $contrasena'";?>
Añado que el botón estando dentro del form me recarga la pagina, pero cuando lo coloco fuera del form no me recarga la página, y eso que quité el action="" , de verdad nosé como evitar que recargue la página también, me imagino que eso es el problema.