Invalid JSON error reponse with DataTables

Question

Invalid JSON error reponse with DataTables

Navigation

#1 by (3 votes)

0

I can not load the information of a JSON in my table. When I get information through Ajax with DataTables , it tells me the error:

DataTables warning: table id = dt_client - Invalid JSON reponse. For more information about this error, please link

Files used:

conexion.php , file where the query is made to the database

<?php
require 'config.php';


class conexion
{
    private $db_conexion;

    public function __construct()
    {
        try {
            $base = new PDO("mysql:host=localhost;dbname=usuario;charset=utf8", "root", "root");
            echo "Conexion establecida con el servidor " . $base->setAttribute(PDO::ATTR_CONNECTION_STATUS);
            return $this->db_conexion = $base;

        } catch (Exception $e) {
            echo "Error al conctar con la base de datos" . $e->getMessage();
        }
    }

    public function getConextion()
    {
        return $this->db_conexion;
    }
}

class getList
{
    private $list;

    public function __toString()
    {
        return $this->list;
    }

    public function __construct(conexion $con)
    {
        $conexion = $con->getConextion();
        $statement = $conexion->prepare("SELECT * FROM usuario WHERE estado = 1 ORDER BY idusuario desc;");
        $statement->execute();

        if($statement){
            $data ['data']= $statement->fetchAll(PDO::FETCH_ASSOC);
            return $this->list = json_encode($data);
        }

    }
}


echo $con = new getList(new conexion());

index.html , logs are displayed

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Listado de usuarios</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
    <!-- Buttons DataTables -->
    <link rel="stylesheet" href="css/buttons.bootstrap.min.css">
</head>
<body>   

<div class="row">
    <div id="cuadro1" class="col-sm-12 col-md-12 col-lg-12">
        <div class="col-sm-offset-2 col-sm-8">
            <h3 class="text-center"> <small class="mensaje"></small></h3>
        </div>
        <div class="table-responsive col-sm-12">
            <table id="dt_cliente" class="table table-bordered table-hover" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Apellidos</th>
                    <th>Dni</th>
                    <th></th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>


<script src="js/jquery-1.12.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<!--botones DataTables-->
<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.bootstrap.min.js"></script>
<!--Libreria para exportar Excel-->
<script src="js/jszip.min.js"></script>
<!--Librerias para exportar PDF-->
<script src="js/pdfmake.min.js"></script>
<script src="js/vfs_fonts.js"></script>
<!--Librerias para botones de exportación-->
<script src="js/buttons.html5.min.js"></script>

<script>
    $(document).on("ready", function(){
        listar();
    });

    var listar = function(){
        var table = $('#dt_cliente').DataTable({
            'ajax':{
                'method':'POST',
                'url':'conexion.php'
            },
            'columns':[

                {'data':'nombre'},
                {'data':'apellidos'},
                {'data':'dni'}
            ]

        })
    }


</script>
</body>
</html>

When running echo $con = new getList(new conexion()); shows me:

Conexion establecida con el servidor {"data":[
  {"idusuario":"22","nombre":"Carlos","apellidos":"\u00c1valos","dni":"26859103","estado":"1"},
  {"idusuario":"21","nombre":"Marco","apellidos":"Cordova","dni":"46851298","estado":"1"},
  {"idusuario":"20","nombre":"Violeta","apellidos":"Abarca","dni":"27416589","estado":"1"},
  {"idusuario":"16","nombre":"Almendra","apellidos":"Abarca","dni":"53127854","estado":"1"},
  {"idusuario":"15","nombre":"Daniel","apellidos":"Abarca","dni":"14851204","estado":"1"},
  {"idusuario":"13","nombre":"Yoshi","apellidos":"Takeuchi","dni":"45126355","estado":"1"},
  {"idusuario":"12","nombre":"Alejandra","apellidos":"Abarca","dni":"49856321","estado":"1"},
  {"idusuario":"7","nombre":"William","apellidos":"Duran","dni":"47806512","estado":"1"},
  {"idusuario":"6","nombre":"Benita","apellidos":"\u00c1vila","dni":"15234871","estado":"1"},
  {"idusuario":"5","nombre":"Geovanny","apellidos":"R\u00edos","dni":"47859612","estado":"1"},
  {"idusuario":"4","nombre":"Amelia","apellidos":"Abarca","dni":"25123653","estado":"1"},
  {"idusuario":"3","nombre":"Jorge","apellidos":"R\u00edos","dni":"22526385","estado":"1"},
  {"idusuario":"2","nombre":"Petter","apellidos":"R\u00edos","dni":"49051200","estado":"1"},
  {"idusuario":"1","nombre":"Angelo","apellidos":"Uriol","dni":"48125800","estado":"1"}
]}

php json ajax datatables

asked by jeancarlos733 02.03.2017 в 08:28

source

1 answer

Invalid CORS request Angular 2 Validate empty fields C # [closed]

score 3 · Accepted Answer

The error is that you are writing a hard text string:

 echo "Conexion establecida con el servidor " . $base->setAttribute(PDO::ATTR_CONNECTION_STATUS);

Then, the output of the json starts with that string:

Conexion establecida con el servidor {"data":[...]}

That string is not a valid json.

The solution is to remove the hard text and leave the setAttribute alone.

$base->setAttribute(PDO::ATTR_CONNECTION_STATUS);

So that the output is

 {"data":[...]}