Question

我的任务是使用Ajax / jQuery而不是iFrame对MySQL查询结果进行分页。我们使用的当前iFrame内容位于：http://www.stratusinternational.com/headerlatest.asp?Page=1&L=EN

页面当前每10秒刷新一次，传递（页码+1）直到到达结尾（页359）。每个页面读入4个结果，我们确实包括适用的后退和下一个按钮。

我们想要做的是拥有相同的功能，但不是使用iFrame，而是将结果包含在具有所有相同功能的div中。我一直在寻找解决方案，但是迄今为止我发现的唯一一个不会支持转到下一页。

我们想要改变我们所做的事情背后的原因是iFrame分页记录在历史记录中，因此访问浏览器后退按钮的访问者必须在页面历史记录之前一直循环回iFrame历史记录。

如果没有简单的解决方案，请道歉。如果需要，可以提供代码。

任何帮助都非常感激。

Answer 1

好的，这里有一些示例代码可以帮助您入门。

您可以保留大部分headerlatest.asp脚本，但需要进行一些更改并添加一些JavaScript。

删除以下行（这是每10秒重新加载页面的行）。这将被AJAX调用取代。

<meta http-equiv="refresh" content="10;url=?Page=65&L=EN"/>

提供上一个和下一个按钮ID：

<a id="prev" href="?L=EN&Page=63" style="text-decoration: none"><img src="images/prevframe.png" border="0"></a>

<a id="next" href="?L=EN&Page=65" style="text-decoration: none"><img src="images/nextframe.png" border="0"></a>

将DIV放在TABLE周围，其中包含四列ID：

<div id="content" align="center">

在您的页面上包含jQuery并添加一些JavaScript来处理内容刷新和上一个/下一个按钮。您可能需要对此进行更改以满足您的需要，例如处理最大页数的部分。

<script type="text/javascript">
$(function () {
    var page = 1;

    $(".prev").click(function () {
       UpdatePage(-1); 
        return false;
    });

    $(".next").click(function () {
       UpdatePage(1);
        return false;
    });

    function UpdatePage(ctr) {
        if (typeof ctr === "undefined") {
            page = page + 1;
        } else {
            page = page + ctr;
        }
        if (page > 10) //maximum (if needed)
            page = 1; //go to first
        //if (page < 1) //minimum 
        //   page = 10; //go to maximum
        if (page == 1) {
            $("#prev").hide();
            setTimeout(UpdatePage, 1000 * 10);
            return;
        } else {
            $("#prev").show();
        }

        $.ajax({
            type: "GET",
            url: "/myservice.asp", //this page needs to return the table content
            data: "{'page':" + page + ",'L':'EN'}",
            contentType: "text/html;",
            cache: false,
            success: function (content) {
                $("#content").html(content);
                setTimeout(UpdatePage, 1000 * 10);
            },
            error: function () {
                alert("Error");
            }
        });
    }

    setTimeout(UpdatePage, 1000 * 10);
});
</script>

最后，您需要创建一个名为myservice.asp的第二个脚本，该脚本基本上具有headerlatest.asp所具有的大部分代码，除了它应该仅返回带有TABLE的<div align="center">内的内容。

工作原理：对于第一次调用，您的页面操作与现在相同。但是10秒后，将通过AJAX请求新内容，并将其注入内容DIV。然后，上一个和下一个按钮也将使用AJAX来请求相应的内容。

让我知道它是怎么回事，或者你是否需要任何帮助。

编辑：

不要像现在那样隐藏第1页上的上一个按钮，而是仅将其设置为CSS display：none。更新后的JavaScript将负责隐藏和显示上一个按钮。

<a id="prev" href="?L=EN&Page=1" style="display:none;text-decoration: none"><img src="images/prevframe.png" border="0"></a>

jQuery使用经典的asp记录div中的分页

1 个答案: