Aquí hay un fragmento de mi código: page.php
<input type="text" id="search_query" style="float: right" placeholder="Search" /> <div id="result"></div> <table> <tr> <th><input type="checkbox" name="select_all" id="select_all" value=""/></th> <th>Title</th> <th>Author</th> <th>Date Published</th> <th>Actions</th> </tr> <?php if (isset($_POST['query'])) { $query = $_POST['query']; $res = search_articles($query); // a function I have to query the database with SQL 'LIKE' } else { $res = view_articles(); // another function } while ($row = $res->fetch_assoc()) { echo '<tr>'; echo '<td><input type="checkbox" name="checked_id[]" class="checkbox" value="' . $row['id'] . ' ?>"/></td>'; echo '<td>' . $row['title'] . '</td>'; echo '<td>' . $row['author'] . '</td>'; echo '<td>' . $row['date_published'] . '</td>'; echo '<td> <a href="?del=' . $row['id'] . '">Delete</a> | <a href="?edit=' . $row['id'] . '">Edit</a> </td>'; echo '</tr>'; } ?> </table>y la solicitud ajax: (también en page.php)
function load_data(query) { $.ajax({ url: "", method: "POST", data: {query: query}, success: function (data) { $('#result').html(data); } }); } $('#search_query').keyup(function () { var search = $(this).val(); if (search != '') { load_data(search); } else { load_data(); } });Básicamente, tengo una barra de búsqueda donde el usuario puede escribir cualquier cosa y luego la tabla donde muestro las columnas (tomadas de una tabla de base de datos) cambiará dinámicamente.
El código que tengo arriba funciona bien, pero cada vez que escribo algo en la barra de búsqueda, se muestra una copia exacta de la página (todo en mi página se muestra dos veces). ¿Hay alguna manera de hacer que la solicitud de AJAX devuelva solo la tabla y no la página completa? (sin mover todo el código en un archivo php separado, ya que quiero lograr esto en un solo archivo)
Creo que el problema se debe a que estoy pasando los datos (que contienen toda la página) al div #result. Traté de buscar una solución y estuve modificando mi código durante las últimas 3 horas más o menos, pero fue en vano. Soy relativamente nuevo en estas tecnologías web (¡Dios, hay tantas!) y espero que alguien pueda ayudar.
Verifique la solución publicada aquí Ajax a PHP en la misma página
Básicamente, sugiere que no debe hacer eco en lugar de salir () de su respuesta. De lo contrario, el resto de la página se "carga" nuevamente después de que if(isset... haya finalizado.