elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  [Resuelto] [Newbie] No puedo acceder a objeto JSON enviado por AJAX
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] [Newbie] No puedo acceder a objeto JSON enviado por AJAX  (Leído 4,870 veces)
iGust4v0x

Desconectado Desconectado

Mensajes: 8


Ver Perfil
[Resuelto] [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« en: 14 Enero 2015, 05:43 am »

Buenas noches. Tengo un pequeño problema con AJAX y PHP.

Lo que intento realizar un buscador en tiempo real, como el de AngularJS. Lo que deseo que haga es lo siguiente:

  • Enviar un objeto JSON por medio de AJAX hacia un script PHP.
  • El retorno de datos quiero que sea opcional (actualmente, si no retorno un json desde mi script PHP con json_encode($array_asociativo), me lanza un parserrror.
  • Una vez obtenido el dato del objeto JSON realizar una consulta a la BD para buscar matches (full text).
  • En el método done() del método AJAX de jQuery, recargar la tabla por medio del método load("path/to/file.php").

    Nota: Si le pongo dataType: "json" y no devuelvo nada en el script PHP me genera un parserror y el AJAX falla.

    Bien, mi estructura de fichers es la siguiente:

    ROOT -> app y public
    app -> views -> templates -> users-table.php
    public -> js, css, img e index.php

    index.php

    Código
    1. <?php
    2. require_once($_SERVER["DOCUMENT_ROOT"]."/UsuariosCRUD/app/utils/path-dirs.php");
    3. if(!isset($_SESSION["is-search"])) {
    4. $_SESSION["is-search"] = FALSE;
    5. }
    6. ?>
    7. <!DOCTYPE html>
    8. <html lang="en">
    9. <head>
    10. <meta charset="UTF-8">
    11. <title>CRUD Usuarios PHP - AJAX</title>
    12. <link rel="stylesheet" href="public/css/usuarios.css"/>
    13. <link rel="icon" href="public/img/favicon2.ico"/>
    14. </head>
    15. <body>
    16. <header class="header">
    17. <nav class="navbar">
    18. <h1 class="header-title">CRUD de usuarios con PHP y AJAX</h1>
    19. </nav>
    20. </header>
    21.  
    22. <main class="main">
    23. <!-- Textfield para filtrar usuarios -->
    24. <input type="text" id="text-search" class="textfield search" placeholder="Busque un usuario aquí"/>
    25. <!-- Boton para agregar usuario nuevo -->
    26. <button type="button" id="new-user" class="btn btn-primary action-option"
    27. data-action="create-user">Nuevo</button>
    28.  
    29. <!-- tabla de usuarios -->
    30. <section id="datatable">
    31. <?php
    32. require_once($app_dir."views/templates/users-table.php");
    33. ?>
    34. </section>
    35.  
    36. <button type="button" id="destroy-session" class="btn btn-danger"
    37. style="margin-left: 133px">Resetear</button>
    38.  
    39. <!-- ventanas modales -->
    40. <?php
    41. require_once($app_dir."views/templates/modal-windows.php");
    42. ?>
    43. </main>
    44.  
    45. <script src="public/js/destroy-php-session.js"></script>
    46. </body>
    47. </html>
    48.  

    ajax.js

    Código
    1. $("#text-search").on("keyup", function() {
    2. var word = $(this).val();
    3. console.log(word);
    4. //var dataToSend = JSON.parse('{"text": "'+word+'"}');
    5. /*var data = {"text": word};
    6. dataToSend = JSON.parse(JSON.stringify(data));*/
    7.  
    8. $.ajax(
    9. {
    10. url: "app/utils/user/search-users.php",
    11. //dataType: "json",
    12. data: {text: "García"},
    13. type: "GET",
    14. }
    15. )
    16. .done(function() {
    17. $("#datatable").load("app/views/templates/users-table.php");
    18. $("#text-search").focus();
    19. console.log("Success");
    20. })
    21. .fail(function(jqXHR, textStatus, errorThrown) {
    22. console.log(textStatus);
    23. console.log("Fail");
    24. })
    25. .always(function(jqXHR, textStatus, errorThrown) {
    26.  
    27. });
    28. });
    29.  
    30. });

    search-users.php

    Código
    1. <?php
    2. if(!isset($_SESSION)) {
    3.    session_start();
    4.    $_SESSION["is-search"] = TRUE;
    5. }
    6. require_once($_SERVER["DOCUMENT_ROOT"]."/UsuariosCRUD/app/utils/path-dirs.php");
    7. require_once($app_dir."services/user/UserService.class.php");
    8.  
    9.  
    10. // obtiene los usuarios de la bd
    11. $users = null;
    12. if($_SESSION["is-search"] === TRUE) {
    13.    $text = $_GET["text"];
    14.    //$text = "garcia";
    15.    $query = "SELECT * FROM user WHERE MATCH(userId,names,surnames,dni,address,phone,email)
    16.        AGAINST('garcía')";
    17.    $users = UserService::getInstance()->query($query);
    18. }

    users-table.php

    Código
    1. <?php
    2. require_once($_SERVER['DOCUMENT_ROOT'].'/UsuariosCRUD/app/utils/path-dirs.php');
    3. if(!isset($_SESSION)) {
    4.    session_start();
    5. }
    6. if($_SESSION["is-search"] === TRUE)
    7.    require_once($app_dir."utils/user/search-users.php");
    8. else
    9.    require_once($app_dir.'utils/user/obtener-usuarios.php');
    10. ?>
    11. <table id="table" class="table" style="width: auto; margin: 10px auto">
    12.    <thead>
    13.        <tr>
    14.            <th>ID</th>
    15.            <th>Nombres</th>
    16.            <th>Apellidos</th>
    17.            <th>DNI</th>
    18.            <th>Dirección</th>
    19.            <th>Teléfono</th>
    20.            <th>Email</th>
    21.            <th>Acción</th>
    22.        </tr>
    23.    </thead>
    24.    <tbody>
    25.        <?php
    26.        $actionLinks =
    27.        '<a class="action-option" data-action="user-info">'.
    28.        '<span class="nowrap"><span class="icon icon-info icon-margin icon-info-margin"></span></span>'.
    29.        'Ver'.
    30.        '</a>'.
    31.        '<a class="action-option" data-action="edit-user">'.
    32.        '<span class="nowrap"><span class="icon icon-edit icon-margin"></span></span>'.
    33.        'Editar'.
    34.        '</a>'.
    35.        '<a class="action-option" data-action="drop-user">'.
    36.        '<span class="nowrap"><span class="icon icon-drop icon-margin icon-drop-margin"></span></span>'.
    37.        'Remover'.
    38.        '</a>';
    39.        $rowIndex = 1;
    40.        while($row = $users->fetch_assoc()) {
    41.            echo "<tr data-row-index=".$rowIndex.">";
    42.            echo "<td>".$row["userId"]."</td>";
    43.            echo "<td>".$row["names"]."</td>";
    44.            echo "<td>".$row["surnames"]."</td>";
    45.            echo "<td>".$row["dni"]."</td>";
    46.            echo "<td>".$row["address"]."</td>";
    47.            echo "<td>".$row["phone"]."</td>";
    48.            echo "<td>".$row["email"]."</td>";
    49.            echo "<td>".$actionLinks."</td>";
    50.            echo "</tr>";
    51.            $rowIndex++;
    52.        }
    53.        ?>
    54.    </tbody>
    55. </table>


    Screenshot:





    Gracias.


« Última modificación: 14 Enero 2015, 22:00 pm por #!drvy » En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« Respuesta #1 en: 14 Enero 2015, 05:52 am »

si solicitas un tipo de dato no puedes retornar vacio, ya que JSON no tiene predeterminado vacio, debes retornar siempre un JSON valido (así sea solo {}), si no consigues nada, retorna la transformación a json de "false" solo...

acostúmbrate a eso... siempre debes retornar datos, ya sea para decir, que está mal, o hubo error... eso siempre resuelve muchos problemas y por eso tipos de datos como json lo obligan...

sin embargo no veo en ningún lugar que retornes datos en formato json...

tu problema es el parse error o tienes alguna duda?


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
iGust4v0x

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« Respuesta #2 en: 14 Enero 2015, 06:06 am »

Gracias por responder. Respecto a tus recomendaciones, eso lo tengo claro. Soy newbie en PHP pero tengo algo de experiencia en el mundo JEE.

Me disculparás las, quizás, estupideces que hago en PHP, pero es que recién no llevo ni una semana con el lenguaje xD.

Lo que pasa es que si retorno un objeto JSON de vuelta a a llamada AJAX, como se hace por medio de 'echo', el objeto JSON se va a imprimir en pantalla (ver imagen más abajo), y eso queda fuera de lugar.

Según tengo entendido, obviando el parámetro dataType no es obligatorio devolver el JSON desde PHP, y eso es lo que pretendo hacer.

Actualizaciones de código:

ajax.js

Código
  1. $.ajax(
  2. {
  3. url: "app/utils/user/search-users.php",
  4. dataType: "json",
  5. data: {text: "García"},
  6. type: "GET",
  7. }
  8. )
  9. .done(function(data) {
  10. $("#datatable").load("app/views/templates/users-table.php");
  11. $("#text-search").focus();
  12.                ....

search-users.php

Código
  1. $users = null;
  2. if($_SESSION["is-search"] === TRUE) {
  3.    $text = $_GET["text"];
  4.    $query = "SELECT * FROM user WHERE MATCH(userId,names,surnames,dni,address,phone,email)
  5.        AGAINST('".$text."')";
  6.    $users = UserService::getInstance()->query($query);
  7. }
  8. $response = array("mensaje" => "Respuesta");
  9. echo json_encode($response);

Screenshot:

« Última modificación: 14 Enero 2015, 15:42 pm por #!drvy » En línea

JorgeEMX
Ex-Staff
*
Desconectado Desconectado

Mensajes: 2.615



Ver Perfil WWW
Re: [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« Respuesta #3 en: 14 Enero 2015, 06:45 am »

Para que tu respuesta sea tomada como JSON debes agregar el tipo de contenido con un header:


search-users.php

Código
  1. $users = null;
  2. if($_SESSION["is-search"] === TRUE) {
  3.    $text = $_GET["text"];
  4.    $query = "SELECT * FROM user WHERE MATCH(userId,names,surnames,dni,address,phone,email)
  5.        AGAINST('".$text."')";
  6.    $users = UserService::getInstance()->query($query);
  7. }
  8. $response = array("mensaje" => "Respuesta");
  9.  
  10. header('Content-Type: application/json');
  11. echo json_encode($response); exit;
  12.  

En línea

iGust4v0x

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« Respuesta #4 en: 14 Enero 2015, 14:32 pm »

Gracias por contestar JorgeEMX.

La misma situación que muestra el screenshot anterior. No consigo hacer funcionar el buscador, bien indicando el dataType en el método ajax() de jQuery o bien obviándolo para no imprimir nada en el HTML.

Saludos.

UPDATE

Solo he agregado éstas líneas a search-users.php:

Código
  1. var_dump($_REQUEST);
  2. header('ContentType: application/json');
  3. echo json_encode($_REQUEST);

Y en el JS:

Código
  1. var dataToSend = JSON.parse('{"text": "'+word+'"}');
  2.  
  3. $.ajax(
  4. {
  5. url: "app/utils/user/search-users.php",
  6. //dataType: "json",
  7. data: dataToSend,
  8. type: "POST",
  9. }
  10. )
  11. .done(function(data) {
  12. $("#datatable").load("app/views/templates/users-table.php");
  13. $("#text-search").focus();
  14. //console.log("Success");
  15. console.log(data);


Screnshot:


Al imprimir el array $_REQUEST que envié devuelta a AJAX, me muestra los datos que estoy digitando. Pero el var_dump que hago en el script PHP, me muestra un array vacío.

Como dije soy nuevo en PHP y no entiendo bien por qué pasa ésto. ¿Si en JS me muestra que $_REQUEST no está vacío, por qué el var_dump me indica que sí?

Un saludo.

UPDATE

Si coloco el dataType y retorno un JSON desde PHP, me muestra parseerror (método fail() de jqXHR de AJAX).

Código
  1. if($_SESSION["is-search"] === TRUE) {
  2.    $text = "garcía";
  3.    if(isset($_REQUEST["text"]))
  4.        $text = $_REQUEST["text"];
  5.    $query = "SELECT * FROM user WHERE MATCH(userId,names,surnames,dni,address,phone,email)
  6.        AGAINST('".$text."')";
  7.    $users = UserService::getInstance()->query($query);
  8.    var_dump($_REQUEST);
  9.    header('ContentType: application/json');
  10.    $response = array("request" => json_encode($_REQUEST));
  11.    echo json_encode($response);
  12. }

Código
  1. $.ajax(
  2. {
  3. url: "app/utils/user/search-users.php",
  4. dataType: "json",
  5. data: dataToSend,
  6. type: "POST",
  7. }
  8. )

La consola muestra (imprimo el textStatus en el método fail): parseerror
« Última modificación: 14 Enero 2015, 15:23 pm por iGust4v0x » En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« Respuesta #5 en: 14 Enero 2015, 15:21 pm »

Realmente el texto que se imprime es por esto:
Código
  1. $("#datatable").load("app/views/templates/users-table.php");

Porque ese script en php esta incluyendo la respuesta json_encode de tu archivo searc-users.php. Te aconsejaria que replantearas la logica de tu vista.
En línea

iGust4v0x

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« Respuesta #6 en: 14 Enero 2015, 21:12 pm »

Muchas gracias por responder @MinusFour (Y).

Voy a replantear la lógica de la vista como me aconsejas y cualquier problema que tenga (abusando de su confianza xD) actualizaré el post.

Un saludo.



Al fín pude solucionar el problema, y todo empezó por la idea de @MinusFour (gracias).

Código
  1. if($_SESSION["is-search"] === TRUE) {
  2.  
  3.    unset($_SESSION["users"]);
  4.    $text = $_REQUEST["text"];
  5.  
  6.    $query = "SELECT * FROM user WHERE MATCH(userId,names,surnames,dni,address,phone,email)
  7.    AGAINST('$text')";
  8.    $usersFinded = UserService::getInstance()->query($query);
  9.  
  10.    while($row = mysqli_fetch_array($usersFinded)) {
  11.        $_SESSION["users"][] = $row;
  12.    }
  13.  
  14.    header('ContentType: application/json');
  15.    echo json_encode(array("ususarios" => $_SESSION["users"]));
  16. }
  17.  
  18. if($_SESSION["is-search"] === FALSE ) {
  19.    unset($_SESSION["users"]);
  20.    $allUsers = UserService::getInstance()->selectAll();
  21.    while($row = mysqli_fetch_array($allUsers)) {
  22.        $_SESSION["users"][] = $row;
  23.    }
  24. }

Código
  1. var word = $(this).val();
  2. var dataToSend = JSON.parse('{"text": "'+word+'"}');
  3.  
  4. $.ajax(
  5. {
  6. url: "app/utils/user/search-users.php",
  7. dataType: "json",
  8. data: dataToSend,
  9. type: "GET",
  10. }
  11. )

Decidí usar variables de sesión para guardar los usuarios, y un estado para al momento de cargar los datos en la tabla, obtenga los usuarios dependiendo si es una búsqueda o solo una carga de todos los usuarios.

Saludos.

Mod: No hacer doble post.
« Última modificación: 14 Enero 2015, 22:00 pm por #!drvy » En línea

JorgeEMX
Ex-Staff
*
Desconectado Desconectado

Mensajes: 2.615



Ver Perfil WWW
Re: [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« Respuesta #7 en: 14 Enero 2015, 21:23 pm »

Es muy curiosa la forma en la que estás combinando el AJAX y cargar los resultados si encuentras o no resultado.  :rolleyes:
En línea

iGust4v0x

Desconectado Desconectado

Mensajes: 8


Ver Perfil
Re: [Newbie] No puedo acceder a objeto JSON enviado por AJAX
« Respuesta #8 en: 14 Enero 2015, 21:46 pm »

¿Por curiosa quieres decir un desastre? jajaja
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines