javascript - 可以用ajax更新页面

Question

我有一个由查询结果填充的 div 元素(在index.php 中)。我还有另一个文件 widget.php，它具有相同的查询来更新页面。我在 widget.php“页面”中有一个变量，可以在页面中导航。如果我使用 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");
?>

所以我想在点击时更新值 $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>

Answer 1

删除 prevButton 和 nextButton 前缀的 # 作为 $(this).attr('id') 将返回不带 # 的 id。 id_name 的值可以是 prevButton 或 nextButton。

更新:您的最终 js 脚本应如下所示:

$("#prevbutton, #nextbutton").click(function () {

 var id_name = $(this).attr('id');
 var page = $("#currPageNumber").val();

 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);
    }
  });
 });

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>
                    <input type='hidden' value='".$_GET['page']."' id='currPageNumber'>
                </div>
            </div>";

        }
    ?>
<?php
include("close_connect.php");
?>