veran I have a problem sending and receiving data by AJAX.
I tried to make a user login using ajax but it did not work for me.
The code I have is the following:
HTML FORM AND AJAX FUNCTION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login | </title>
<!-- Bootstrap -->
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- Animate.css -->
<link href="../vendors/animate.css/animate.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="login">
<div id="box">
<div class="login_wrapper">
<div class="animate form login_form">
<div id="mensaje"></div>
<form action="" id="formLogin">
<h1>Acceso al Sistema</h1>
<div>
<input type="text" class="form-control" id ="user" placeholder="Ingrese su Usuario" required="" name="user" />
</div>
<div>
<input type="password" class="form-control" id ="clave" placeholder="Ingrese su Contraseña" required="" name="clave" />
</div>
<div>
<input type="submit" class="btn btn-primary" id="login" value="Ingresar" />
<a class="reset_pass" href="#">¿Ha olvidado su contraseña?</a>
<a class="signUp" href="register.php">Registrate!</a>
</div>
<div class="clearfix"></div>
<div class="separator">
<div class="clearfix"></div>
<br />
<br>
<div>
<h1><i class="fa fa-paw"></i> MiPagina!</h1>
<p>©2018 MiPagina. Todos los Derechos Reservados</p>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('submit', '#formLogin', function (e) {
e.preventDefault();
$.ajax({
url: '../Modelos/Login.php',
type: 'POST',
dataType: 'json',
data: $(this).serialize(),
beforeSend: function() {
}
})
.done(function(respuesta) {
console.log(respuesta);
if (!respuesta.error) {
var id = respuesta.id_user,
usuario = respuesta.username,
nombre = respuesta.nombre,
apellido = respuesta.apellido,
tipo = respuesta.tipo_user;
location.href = "main.php";
} else {
$("#mensaje").html("ERROR!");
}
})
.fail(function(resp) {
console.log(resp.responseText);
})
.always(function() {
console.log("Completado...");
});
}); //fin de la función
</script>
</body>
</html>
PHP FILE:
require "../../model/Conexion.php";
$username= $_POST['user'];
$password= $_POST['clave'];
$sentencia = "SELECT * FROM user_dashboard WHERE username='$username' AND password='$password'";
$result=mysqli_query($conexion, $sentencia);
$count=mysqli_num_rows($result);
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
header('Content-Type: application/json');
if($count==1)
{
$array_result = array('error' => false, 'id_user' => $row['id_user'], 'username' => $row['username'], 'nombre' => $row['nombre'], 'apellido' => $row['apellido'], 'tipo_user' => $row['tipo_user']);
echo json_encode($array_result);
} else {
echo json_encode(array('error' => true));
}
$conexion->close();
CONNECTION WITH MYSQL:
$conexion = new mysqli("localhost", "root", "", "usuarios");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
When I enter my username and password in the form, it does not do anything at all, it does not redirect to the main.php page. Check the console to see what answer I got and I get this error:
<br />
<b>Fatal error</b>: Uncaught Error: Call to undefined function jason_encode() in C:\xampp\htdocs\solventas\dashboard\Modelos\login.php:24
Stack trace:
#0 {main}
thrown in <b>C:\xampp\htdocs\solventas\dashboard\Modelos\login.php</b> on line <b>24</b><br />
run php -m and json if it appears between the modules. I really do not understand what the problem is. I have used json on other occasions with php to perform various operations. But it's the first time I use it with ajax. I do not know exactly what I'm doing wrong. Any help you can give me?