Here's snippet from my code: 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>

and the ajax request: (also in 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();
    }
});

Basically, I have a search bar where the user can type anything and then the table where I'm showing the columns (taken from a database table) will change dynamically.

The code I have above is working fine but every time I type anything on the search bar, an exact copy of the page is being displayed (everything in my page gets displayed twice). Is there a way I can make the AJAX request return the table only and not the entire page? (without moving the entire code in a separate php file as I want to accomplish this in a single file)

I believe the problem is because I'm passing the data (which contains the whole page) to the #result div. I've tried looking for a solution and been tweaking my code for the last 3 hours or so but to no avail. I'm relatively new to these web technologies (God there are so many!) and I hope someone can help.