Ajax 加載：在元素中再次添加整個頁面

Question

我有一個列表頁面。 默認情況下，我顯示 10 行結果。 如果行數大於 10，我將顯示更多負載。 當用戶點擊加載更多時，我想再顯示 10 個結果。 但是當我單擊加載更多按鈕時，它會再次將整個頁面添加到行內的表格中。 有什么建議么？

列表頁面：

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
    var job_count = 10;
    $('#loadMoreJobs').click(function() {
        job_count += 10;
        $('#latestJobs').load('load_jobs.php', {
           job_count: job_count
        });
    });
});
</script>

<tbody id="latestJobs">
    <?php

    $jobs = find_jobs_by_status('active', 10);

    if (mysqli_num_rows($jobs) < 1) {

        echo '<tr class="job-listing-body">';
        echo '<td colspan="6">No jobs found.</td>';
        echo '</tr>';
    } else {
        while ($job = mysqli_fetch_assoc($jobs)) {
            echo '<tr class="job-listing-body">';
            echo '<td>' . $job['updated_at'] . '</td>';
            echo '<td><a href="job_apply?job=' . $job['job_id'] . '">' . $job['title'] . '</a></td>';
            echo '<td>0/' . $job['required_freelancers'] . '</td>';
            echo '<td>' . $job['delivery_time'] . ' days</td>';
            echo '<td>' . $job['budget'] . '</td>';
            echo '<td><a href="job_apply?job=' . $job['job_id'] . '" class="btn btn-sm btn-apply-inv w-md waves-effect waves-light">Apply</a></td>';
            echo '</tr>';
        }
    }

    ?>
</tbody>

<button class="btn btn-secondary w-md waves-effect waves-light" id="loadMoreJobs">Load More</button>

加載更多行頁面：

<?php

    require_once('includes/initialize.php');

    if (isset($_POST['job_count'])) {

        $job_count = $_POST['job_count'];

        $result = find_jobs_by_status('active', $job_count);

        if (mysqli_num_rows($result) < 1) {

            echo '<tr class="job-listing-body">';
            echo '<td colspan="6">No jobs found.</td>';
            echo '</tr>';

        } else {

            while ($job = mysqli_fetch_assoc($result)) {
                echo '<tr class="job-listing-body">';
                echo '<td>' . $job['updated_at'] . '</td>';
                echo '<td><a href="job_apply?job=' . $job['job_id'] . '">' . $job['title'] . '</a></td>';
                echo '<td>0/' . $job['required_freelancers'] . '</td>';
                echo '<td>' . $job['delivery_time'] . ' days</td>';
                echo '<td>' . $job['budget'] . '</td>';
                echo '<td><a href="job_apply?job=' . $job['job_id'] . '" class="btn btn-sm btn-apply-inv w-md waves-effect waves-light">Apply</a></td>';
                echo '</tr>';
            }

            mysqli_free_result($result);

        }

    } else {
        redirect_to('jobs');
    }

?>

Answer 1

如果您在列表頁面中執行此操作，那就更好了

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>
$(document).ready(function() {
     var job_count = 10;
    $('#loadMoreJobs').click(function() {
        job_count += 10;   
        $.ajax({
            type: 'post',
            url: 'load_jobs.php',
            data: {
                job_count:job_count
            },
            success: function (response) {
                var content = document.getElementById("job_display");
                content.innerHTML = response;
            }
        });

    });
});
</script>

<tbody id="latestJobs">
    <?php

    $jobs = find_jobs_by_status('active', 10);

    if (mysqli_num_rows($jobs) < 1) {

        echo '<tr class="job-listing-body">';
        echo '<td colspan="6">No jobs found.</td>';
        echo '</tr>';
    } else {
        while ($job = mysqli_fetch_assoc($jobs)) {
            echo '<tr class="job-listing-body">';
            echo '<td>' . $job['updated_at'] . '</td>';
            echo '<td><a href="job_apply?job=' . $job['job_id'] . '">' . $job['title'] . '</a></td>';
            echo '<td>0/' . $job['required_freelancers'] . '</td>';
            echo '<td>' . $job['delivery_time'] . ' days</td>';
            echo '<td>' . $job['budget'] . '</td>';
            echo '<td><a href="job_apply?job=' . $job['job_id'] . '" class="btn btn-sm btn-apply-inv w-md waves-effect waves-light">Apply</a></td>';
            echo '</tr>';
        }
    }

    ?>
</tbody>
<div id="job_display"></div>
<button class="btn btn-secondary w-md waves-effect waves-light" id="loadMoreJobs">Load More</button>