Question

我有一个包含项目列表的页面。页面底部是“查看更多”按钮。当有人单击此按钮时，页面需要添加更多项目。 var是$ displayedquestions，当点击“查看更多”按钮时，页面现在被编码以刷新，但是我们希望它能够实时显示。怎么办呢？

这是代码：

<?php
include "db_connect.php";
db_connect();

function tags($tags)
{
    $tagarray=explode(",",$tags);
    $i=0;
    $finished='false';
    while($finished=='false') {
        if (empty($tagarray[$i])=='true') {
            $finished='true';
        } else {
            $taglist = $taglist . '<a class="commonTagNames" href="">' . $tagarray[$i] . '</a> &nbsp;';
            $i++;
        }
    }
    return $taglist;
}


function formattime($timesince)
{
    $strsince=number_format($timesince,0,'','');
    $nodecimals=intval($strsince);
    if ($nodecimals<1){
        return "Less than a minute ago";
    } elseif ($nodecimals>=1&&$nodecimals<60) {
        return $nodecimals . " min ago";
    } elseif ($nodecimals>60&&$nodecimals<1440){
        $hourssince=$nodecimals/60;
        $hoursnodecimals=number_format($hourssince,0);
        return $hoursnodecimals . " hours ago";
    } elseif ($nodecimals>1440){
        $dayssince=$nodecimals/1440;
        $daysnodecimals=number_format($dayssince,0);
        return $daysnodecimals . " days ago";
    }
}

$submitbutton=$_REQUEST['viewmore'];
$numquestions=intval($_REQUEST['questions']);
if($numquestions!=0) {
    $displayedquestions=$numquestions;
} else {
    $displayedquestions=10;
}

$sql="SELECT * FROM `Questions` ORDER BY `Questions`.`ID`  DESC LIMIT 0, " . $displayedquestions;
$questions=mysql_query($sql);
while($row = mysql_fetch_array($questions))
{
$id = $row['ID'];
$user = $row['userAsking'];
$question = $row['question'];
$tags = $row['tags'];
$timestamp = $row['timestamp'];
$time=strtotime($timestamp);
$secondssince=(date(U)-$time)/60;
$timesince=formattime($secondssince);
$responses=mysql_query("SELECT * FROM `answersToQuestions` WHERE `idOfQuestion`= '$id'");
$comments=mysql_num_rows($responses);
$likes=mysql_query("SELECT * FROM `likesOfQuestions` WHERE `idOfQuestion`= '$id'");
$numlikes=mysql_num_rows($likes);
$userprofileq = mysql_query("SELECT `ID`,`avatar` FROM `Users` WHERE `username` = '$user'");
$userprofileresult = mysql_fetch_row($userprofileq);
$linktoprofile = $userprofileresult[0];
$avatar = $userprofileresult[1];
$taglist=tags($tags);

        echo "</li>";


                        echo '<li class="questionsList" onclick="showUser(' . $id  . ')">
                            <div id="questionPadding">
                            <img class="askerImage" width=50 height=50 src="../Images/userimages/' . $avatar . '.png"/>
                            <div class="questionFirstRow"><h1 class="questionTitle">' . $question . '</h1></div>
                            <span class="midRow">
                            <span class="askerSpan"><a class="askerName" href="">'. $user .'</a></span>
                            </span>
                            <span class="bottomRow">                                
                                <img src="../Images/comment.png"/>
                                <span class="comments">' . $comments . '</span>
                                <img src="../Images/likes.png"/>
                                <span class="likes">' . $numlikes . '</span>
                                ' . $timesince . ' 
                            </span>
                            </div>
                        </li>';


}


?>

<center><a href="index.php?questions=<?php  echo $displayedquestions+10; ?>"><img class="moreQuestions" src="../Images/viewMoreBar.png" alt="More" /></a></center>

Answer 1

如果没有做很多工作，你可以添加ajax。使用此功能：

首先，（我假设您将上面的代码包含在另一个文件中）围绕它创建一个容器。例如：

<div id='container'>...</div>

其次，将此javascript添加到包含您上面代码的页面：

<script type="text/javascript">
    $(function(){
        $("#container img.moreQuestions").parent().live('click', (function (e) { 
                e.preventDefault();
                $("#container").load($(this).attr("href"));
            });
        });
    });
</script>

这将加载到您已经拥有的脚本#container，而不刷新页面的其余部分。

注意我示例中More链接（斜杠按钮）的选择器为$("#container img.moreQuestions").parent()，因为您没有类或ID。您应该为More链接指定一个类或ID，并将其用于选择器。

Answer 2

像@diEcho提到的那样，jQuery将是一个很好的帮助：您可以通过ajax（例如从php文件中检索完整列表）轻松刷新项目列表，以及使用新添加的值更新DOM元素。试试看。另外你应该考虑通过ajax获取初始项目。数据逻辑/显示/ UI功能以这种方式干净利落地分开。

点击更改显示的问题

2 个答案: