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:
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.phpCódigo (php) [Seleccionar]<?php
require_once($_SERVER["DOCUMENT_ROOT"]."/UsuariosCRUD/app/utils/path-dirs.php");
session_start();
if(!isset($_SESSION["is-search"])) {
$_SESSION["is-search"] = FALSE;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CRUD Usuarios PHP - AJAX</title>
<link rel="stylesheet" href="public/css/usuarios.css"/>
<link rel="icon" href="public/img/favicon2.ico"/>
</head>
<body>
<header class="header">
<nav class="navbar">
<h1 class="header-title">CRUD de usuarios con PHP y AJAX</h1>
</nav>
</header>
<main class="main">
<!-- Textfield para filtrar usuarios -->
<input type="text" id="text-search" class="textfield search" placeholder="Busque un usuario aquí"/>
<!-- Boton para agregar usuario nuevo -->
<button type="button" id="new-user" class="btn btn-primary action-option"
data-action="create-user">Nuevo</button>
<!-- tabla de usuarios -->
<section id="datatable">
<?php
require_once($app_dir."views/templates/users-table.php");
?>
</section>
<button type="button" id="destroy-session" class="btn btn-danger"
style="margin-left: 133px">Resetear</button>
<!-- ventanas modales -->
<?php
require_once($app_dir."views/templates/modal-windows.php");
?>
</main>
<script src="public/js/destroy-php-session.js"></script>
</body>
</html>
ajax.jsCódigo (javascript) [Seleccionar]$("#text-search").on("keyup", function() {
var word = $(this).val();
console.log(word);
//var dataToSend = JSON.parse('{"text": "'+word+'"}');
/*var data = {"text": word};
dataToSend = JSON.parse(JSON.stringify(data));*/
$.ajax(
{
url: "app/utils/user/search-users.php",
//dataType: "json",
data: {text: "García"},
type: "GET",
}
)
.done(function() {
$("#datatable").load("app/views/templates/users-table.php");
$("#text-search").focus();
console.log("Success");
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log("Fail");
})
.always(function(jqXHR, textStatus, errorThrown) {
});
});
});
search-users.phpCódigo (php) [Seleccionar]<?php
if(!isset($_SESSION)) {
session_start();
$_SESSION["is-search"] = TRUE;
}
require_once($_SERVER["DOCUMENT_ROOT"]."/UsuariosCRUD/app/utils/path-dirs.php");
require_once($app_dir."services/user/UserService.class.php");
// obtiene los usuarios de la bd
$users = null;
if($_SESSION["is-search"] === TRUE) {
$text = $_GET["text"];
//$text = "garcia";
$query = "SELECT * FROM user WHERE MATCH(userId,names,surnames,dni,address,phone,email)
AGAINST('garcía')";
$users = UserService::getInstance()->query($query);
}
users-table.phpCódigo (php) [Seleccionar]<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/UsuariosCRUD/app/utils/path-dirs.php');
if(!isset($_SESSION)) {
session_start();
}
if($_SESSION["is-search"] === TRUE)
require_once($app_dir."utils/user/search-users.php");
else
require_once($app_dir.'utils/user/obtener-usuarios.php');
?>
<table id="table" class="table" style="width: auto; margin: 10px auto">
<thead>
<tr>
<th>ID</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>DNI</th>
<th>Dirección</th>
<th>Teléfono</th>
<th>Email</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<?php
$actionLinks =
'<a class="action-option" data-action="user-info">'.
'<span class="nowrap"><span class="icon icon-info icon-margin icon-info-margin"></span></span>'.
'Ver'.
'</a>'.
'<a class="action-option" data-action="edit-user">'.
'<span class="nowrap"><span class="icon icon-edit icon-margin"></span></span>'.
'Editar'.
'</a>'.
'<a class="action-option" data-action="drop-user">'.
'<span class="nowrap"><span class="icon icon-drop icon-margin icon-drop-margin"></span></span>'.
'Remover'.
'</a>';
$rowIndex = 1;
while($row = $users->fetch_assoc()) {
echo "<tr data-row-index=".$rowIndex.">";
echo "<td>".$row["userId"]."</td>";
echo "<td>".$row["names"]."</td>";
echo "<td>".$row["surnames"]."</td>";
echo "<td>".$row["dni"]."</td>";
echo "<td>".$row["address"]."</td>";
echo "<td>".$row["phone"]."</td>";
echo "<td>".$row["email"]."</td>";
echo "<td>".$actionLinks."</td>";
echo "</tr>";
$rowIndex++;
}
?>
</tbody>
</table>
Screenshot:
Gracias.