php - 有些东西让我的页面多次执行 Ajax 调用... [读取 : I've never been more frustrated with something so 'simple' in my life]

Question

注意:这是一个很长的问题。我已经在顶部解释了所有“基础知识”，如果您需要的话，还有一些进一步的(可选)信息。

大家好

基本上，这种情况是在昨晚 9 点左右开始发生的，当时我正在尝试重组我的代码，以便设计师可以添加一些位，使其变得更好一些。我试图修复它，直到凌晨 2 点，然后我放弃了。今天早上回来，还是很困惑。

老实说，我是一个非常糟糕的 Javascript 开发人员。自从开始这个项目以来，Javascript 对我来说是全新的，我只是边做边学。因此，如果我的代码结构真的很糟糕，请原谅我(也许给出一些关于如何改进它的指示？)。

<小时/>

所以，对于这个问题:要重现它，请访问 http://furnace.howcode.com (它还远未完成)。这个问题有点令人困惑，但我非常感谢您的帮助。

1. 因此在第二列中您将看到三个选项卡
2. 默认情况下会选择“最新”选项卡。滚动到底部，应该通过 Ajax 动态获取另外 3 个结果。
3. 现在点击“最高评价”标签。您将看到所有结果，但按评分排序
4. 滚动到“最高评分”的底部。您将看到返回的六个结果。
5. 这就是出错的地方。只应返回另外三个条目(总共 18 个条目)。如果您细心的话，您会发现返回了两个“ block ”，每 block 3 个。
6. 第一个“ block ”是“最新”选项卡中的第二页结果。第二个 block 是我只想返回的。

这有什么意义吗？没关系!

所以基本上我在 Firebug 中检查了这一点。发生的情况是，从“干净”页面(第一次加载，未执行任何操作)，它会调用 ONE POST 请求到 http://furnace.howcode.com/code/loadmore 。

但每次加载新的选项卡时，它都会发出额外 POST 请求，而通常情况下应该只有一个。

那么，你能帮我吗？我真的很感激!此时，您可以开始独立调查或继续阅读以获取更多(可选)信息。

谢谢!

jack

<小时/>

更多信息(可能不相关，但仅供引用):

这几乎就像有一些 Javascript 代码或每次都会重复的东西被留下。我想这可能是我用来检测浏览器何时滚动到底部的代码:

var col = $('#col2');
    col.scroll(function(){
        if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
            loadMore(1);
    }); 

所以我认为代码被留下了，所以每次你滚动#col2(每个选项卡包含不同的数据)时，它都会检测到这一点并将其添加到#newest。因此，我让每个选项卡单击都为 #col2 提供一个动态类 - .newestcol、.featuredcol 或 .toperatedcol。然后我动态地更改了 var col=$('.newestcol'); ，这样它只会为每个选项卡单独检测它(有任何意义吗？!)。但是，嘿，那没有做任何事情。

另一个有用的花絮:这是 http://furnace.howcode.com/code/loadmore 的 PHP :

   $kind  = $this->input->post('kind');

            if ($kind == 1){        // kind is 1 - newest

                $start  = $this->input->post('currentpage');
                $data['query']  = "SELECT code.id AS codeid, code.title AS codetitle, code.summary AS codesummary, code.author AS codeauthor, code.rating AS rating, code.date,
                    code_tags.*, 
                    tags.*, 
                    users.firstname AS authorname, 
                    users.id AS authorid,
                    GROUP_CONCAT(tags.tag SEPARATOR ', ') AS taggroup
                    FROM code, code_tags, tags, users
                    WHERE users.id = code.author AND code_tags.code_id = code.id AND tags.id = code_tags.tag_id
                    GROUP BY code_id
                    ORDER BY date DESC
                    LIMIT $start, 15  "; 

                $this->load->view('code/ajaxlist',$data);

            } elseif ($kind == 2) {     // kind is 2 - featured

所以我的 jQuery 代码发送一个变量“kind”。如果为 1，则运行 Newest 查询，等等。

炉子.howcode.com/code/ajaxlist 的 PHP 代码是:

<?php // Our query base
    // SELECT * FROM code ORDER BY date DESC
    $query = $this->db->query($query);  

    foreach($query->result() as $row) {
?>


<script type="text/javascript">
    $('#title-<?php echo $row->codeid;?>').click(function() {
        var form_data = {
            id: <?php echo $row->codeid; ?>
        };

        $('#col3').fadeOut('slow', function() {
            $.ajax({
                url: "<?php echo site_url('code/viewajax');?>",
                type: 'POST',
                data: form_data,
                success: function(msg) {
                    $('#col3').html(msg);
                    $('#col3').fadeIn('fast');
                }
        });
        });
    }); 
</script>

<div class="result">

    <div class="resulttext">

        <div id="title-<?php echo $row->codeid; ?>" class="title">
            <?php echo anchor('#',$row->codetitle); ?>
        </div>

        <div class="summary">
            <?php echo $row->codesummary; ?>
        </div>

        <!-- Now insert the 5-star rating system -->
        <?php include($_SERVER['DOCUMENT_ROOT']."/fivestars/5star.php");?>

        <div class="bottom">

            <div class="author">
                Submitted by <?php echo anchor('auth/profile/'.$row->authorid,''.$row->authorname);?>
            </div>

            <?php 
            // Now we need to take the GROUP_CONCATted tags and split them using the magic of PHP into seperate tags
            $tagarray = explode(", ", $row->taggroup);
            foreach ($tagarray as $tag) {
            ?>

            <div class="tagbutton" href="#">
                <span><?php echo $tag; ?></span>
            </div> 
                <?php } ?>                      
        </div>

    </div>

</div>

<?php }

echo "&nbsp;";?>

<script type="text/javascript">
var newpage = <?php echo $this->input->post('currentpage') + 15;?>;
</script>

这就是 PHP 的全部内容。其余的您应该能够使用 Firebug 或通过查看源代码来查看。我已将所有 Tab/单击/Ajaxloading 位放在最底部的标签中。在这一切开始之前有一条评论。

非常感谢您的帮助!

Answer 1

我认为您对这个代码块的怀疑是正确的:

var col = $('#col2');
    col.scroll(function(){
        if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
            loadMore(1);
    }); 

我对此的看法是，每次运行此代码时，您都会不断添加额外的事件处理程序(本质上是重复的)。您需要在每次单击选项卡时删除(取消绑定(bind))现有事件处理程序，以便确保它仅触发一次:

$('#col2').unbind();

var col = $('#col2');
    col.scroll(function(){
        if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
            loadMore(1);
    }); 

或者类似的东西。请参阅http://api.jquery.com/unbind/