AJAX request returning the entire HTML page

1

I'm using an ajax function that returns something to min, but the same function besides returning the expected result, it returns the entire HTML code of the page.

In my login form I use the ajax function to authenticate, and I get the HTML code of the page as a return, but if I use the form's post the expected result is returned without the page's HTML.

Follow the code:

login.php

<?php 
    require_once '../../vendor/autoload.php';
    require_once '../route/routes.php';
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Log in</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="../../assets/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../assets/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="../../assets/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../../assets/css/AdminLTE.min.css">
  <script src="../../assets/js/requisicao-ajax-view.js"></script>

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><scriptsrc="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">

  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">Faça login para acessar o sistema</p>

      <div class="form-group has-feedback">
        <input type="text" class="form-control" placeholder="Login" id="login" name="login">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" placeholder="Senha" id="senha" name="senha">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">

          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
            <button type="submit" class="btn btn-primary btn-block btn-flat" onclick="requisicaoAjaxAutenticaUsuario();">Entrar</button>
        </div>
        <!-- /.col -->
      </div>

    <a href="#">Esqueci minha senha</a><br>
    <a href="register.html" class="text-center">Registrar-se</a>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' // optional
    });
  });
</script>
</body>
</html>

function-ajax-autentica.js

     function requisicaoAjaxAutenticaUsuario(){
            //RECUPERA OS DADOS DO FORM DE LOGIN
            var login = document.getElementById("login").value;
            var senha = document.getElementById("senha").value;

            if(login.length > 0 && senha.length > 0){
                $.ajax({
                    type:'post',
                    data:{login: login, senha: senha},
                    contenttype: "application/json; charset=utf-8",
                    url: 'login.php/usuario/autentica',
                    success: function (data) {
                        alert(data);
                    },
                    error: function (erro) {
                        console.log(erro);
                    }
                });
            }
        } 

routes.php

$app = new Slim\App;

$app->post('/usuario/autentica', function($request){
    $login = $request->getParsedBody()['login'];
    $senha = $request->getParsedBody()['senha'];

    require'../model/usuario.php';
    $autentica = new App\Model\Usuario;
    echo $autentica->autenticaUsuario($login, $senha);

});
$app->run();

user.class.php

<?php
namespace App\Model;

/**
 * Classe com os metodos dos usuarios
 *
 * @author Abner Marques
 */
class Usuario {

    public function autenticaUsuario($login, $senha){
        echo $login;
    }
}

The code that is returned is this:

I give alert , and at the beginning of the code the letter A is the value that I enter in the login field, it is returning normally, but what is wrong is the return of the page's HTML code.

    
asked by anonymous 07.12.2017 / 12:20

2 answers

0

As you made an ajax request, anything you mount on your back end (eg an echo in php) will return to your ajax response variable. What you have to do is redirect the user if he has successfully logged in. I for example always return a "logged in" to the javascript.

success: function (data) {
    if(data == 'logado'){
        window.location.replace(url);
    }
},

In the url that I do the redirect has a code that verifies that the user is actually logged in, redirecting it to the restricted area of the site or returning to the login page.

    
09.12.2017 / 23:36
-3

I'm using the slim framework's route systems, the ajax request sends this login.php / username / authenticate path, and it instantiates the user class and calls the authentication method,

routes.php

$app = new Slim\App;

$app->post('/usuario/autentica', function($request){
    $login = $request->getParsedBody()['login'];
    $senha = $request->getParsedBody()['senha'];

    require'../model/usuario.php';
    $autentica = new App\Model\Usuario;
    echo $autentica->autenticaUsuario($login, $senha);

});
$app->run();

user.class.php

<?php
namespace App\Model;

/**
 * Classe com os metodos dos usuarios
 *
 * @author Abner Marques
 */
class Usuario {

    public function autenticaUsuario($login, $senha){
        echo $login;
    }
}

It was only to return the user's login, but he is returning the login along with the html page code

    
07.12.2017 / 12:41