可以使用ajax更新页面

我有一个div元素，它由查询结果填充（在index.php中）。我还有另一个文件widget.php，它有相同的查询来更新页面。我在widget.php"page"中有一个变量，它可以在页面中导航。如果我使用widget.php？page=2，它将加载带有结果的下一页。我想在点击时更新index.php中的div元素。（点击"下一步"，显示另外8条新闻，无需重新加载页面）。

在index.php中：

<button type="button" id="prevbutton">Previous</button>
<button type="button" id="nextbutton">Next</button>
<div id="list"></div>

在script.js:中

$("#prevbutton, #nextbutton").click(function () {
    var id_name = $(this).attr('id');
    var page = 0;
    if (id_name == '#prevbutton' || id_name == '#nextbutton') {
            if (id_name == '#prevbutton') {
                page -= 1;    
            }
            if (id_name == '#nextbutton') {
                page +=1;
            }    
        }
        $.ajax({
            url: 'widget.php',
            type: 'GET',
            data: "page=" + page,
            success: function (data) {
                //called when successful
                $("#list").html(data);
            },
            error: function (e) {
                //called when there is an error
                //console.log(e.message);
            }
        });
    });

在widget.php中：

<?php
header("Cache-Control: public, max-age=60");
include("logindb.php");
$page = $_GET['page'];
$page = $page*9;
?>
                <div id="list">
                    <?php
                    $abfrage59 = "SELECT n.news_title,n.news_id,FLOOR(TIMESTAMPDIFF(HOUR, n.timestamp, NOW())) as diff
                    FROM news n
                    WHERE n.domain_id = '2' AND n.timestamp < NOW()
                    ORDER BY timestamp DESC
                    LIMIT $page,9";
                    $ergebnis59 = mysql_query($abfrage59);
                    while ($row59 = mysql_fetch_object($ergebnis59)) {
                    $newstitleslug = $row59->news_title;
                    $newstitleslug = str_replace(' ', '-', $newstitleslug);
                    $newstitleslug = strtolower($newstitleslug);
                    echo "<div class='"col-sm-6 col-md-4'" style='"padding-bottom: 15px;'">
                            <div class='"item'">
                                <img class='"main'" src='"http://www.example.com/news/$row59->news_id.png'" />
                                <div class='"text'">
                                    <div class='"inner'">
                                        <a href='"http://www.example.com/$newstitleslug/$row59->news_id/'" style='"color:white;'">$row59->news_title<br />
                                        <span class='"date'">$row59->diff hours ago</span>
                                    </div>
                                </div>
                            </div>
                        </div>";
                    }
                    ?>
<?php
include("close_connect.php");
?>

所以我想在点击时更新value$page，并用新数据刷新DIV的内容。提前谢谢。

编辑：从script.js中删除脚本，并将其放在index.php正文的末尾：

<script>
    $("#prevbutton, #nextbutton").click(function () {
            var id_name = $(this).attr('id');
            var temppage = 1;
            if (id_name == 'prevbutton' || id_name == 'nextbutton') {
                    if (id_name == 'prevbutton') {
                        temppage -= 1;    
                    }
                    if (id_name == 'nextbutton') {
                        temppage +=1;
                    }
                var page = temppage;
                }

                $.ajax({
                    url: 'widgets/news_archive_widget.php',
                    type: 'GET',
                    data: "page=" + page,
                    success: function (data) {
                        //called when successful
                        $("#list").html(data);
                    },
                    error: function (e) {
                        //called when there is an error
                        //console.log(e.message);
                    }
                });
            });
    </script>