Question

我正在使用正在使用JS AJAX加载运行的按钮。只需单击它们并运行javascript函数将php文件的内容加载到div中。这是必要的，因为每次按下按钮时我都无法重新加载页面。我还在php文件的html部分中有这些按钮，这些按钮是在主页面中加载的AJAX。我这样做是因为我需要整个页面在某个时刻更新自己。所以说明一下：

主HTML页面：包含JS AJAX请求以获取整个页面（包括按钮）并每半秒更新一次====＆gt;从包含按钮的php文件中检索整个页面。此文件有更多的AJAX请求，让按钮实时响应。每按一次按钮，他们会得到另一个php文件=====＆gt;其他php文件运行后面的代码。

我的问题是：我的网站需要对用户点击按钮非常敏感，而这种AJAX请求的分层造成了相当多的滞后。在我将主页中的所有按钮和AJAX请求都连接到它们之前，然后时机很好 - 没有滞后。但是（正如我之前解释的那样）我需要整体重新加载自己，以便在PHP返回代码中的某些变量等于某些特定内容时作出反应，因此我将所有按钮移动到另一个php文件中，以便每次主页请求AJAX四分之一秒。即使我每隔100秒请求一次，也会有很多延迟。

相关主页代码：

<script>
    function wonfunction()
    {
        $.get('wonphp.php', function(data){
        $('#won').html(data);
        });
    }
    setInterval(wonfunction, 10);
    </script>
    </head>
    <body>
    <div id="won"></div>
    <body>
    </html>

相关的wonphp.php代码（包含按钮的页面代码）：

    <script>
    $('#A').click(function()
    {
        $.get('clickA.php', function(data){
        $('#clickdiv').html(data);
        });
    });

    $('#B').click(function()
    {
        $.get('clickB.php', function(data){
        $('#clickdiv').html(data);
        });
    });

    $('#C').click(function()
    {
        $.get('clickC.php', function(data){
        $('#clickdiv').html(data);
        });
    });
    </script>
    <div id="clickdiv"></div>
    <p align="center"><b><font face="Helvetica" color="#000080"><a href="testrand.php">Click here to purchase more claim credits.</a></font></b></p>
    <p align="center"><img src="images/SetA.jpg" id="A" class="button">
    <img src="images/SetB.jpg" id="B" class="button">
    <img src="images/SetC.jpg" id="C" class="button">

好的，非常感谢你的帮助。

Answer 1

我认为您应该重新编写代码以尽可能减少请求。

您可以使用JSON请求，如果需要，可以使用setInterval进行轮询，使用客户端javascript（Mustache或{{的许多优秀模板引擎之一构建生成的html 3}}）。

function poller() {
    $.getJSON('/wonphp.php?kind=json', function (data) {
        // prepare the resulting data and render the result or
        // trigger an event to another function that will check
        // if initial data has changed rendering html
    });
}
setInterval(poller, 10000); // poll every 10 seconds 
poller(); // initial load

如果您无法使用JSON，请将时间间隔设置为合理的数字，并使用触发jQuery.tmpl的jQuery.live()事件，因为它在跨浏览器环境中不易出错（你应该看一下代码。）

所以它是这样的：

function load_won() {
    $('#won').load('wonphp.php');
}
setInterval(load_won, 5000);
load_won();

$('#A').live('click', function(event) {
    event.preventDefault();
    $('#clickdiv').load('clickA.php');
});

AJAX加载中的AJAX加载

1 个答案: