Question

我创建了一个带有2个窗格界面的简单博客;文章链接在左侧，文章内容在右侧。这已经使用Twitter Bootstrap 2.3 - Tabbable Tabs（来自here）实现。

<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#lA" id="viewarticle" articleid="20" data-toggle="tab"> Section 1 <span id="viewno"></span> </a></li>
        <li><a href="#lB" id="viewarticle" articleid="19" data-toggle="tab"> Section 2 <span id="viewno"></span> </a></li>
        <li><a href="#lC" id="viewarticle" articleid="18" data-toggle="tab"> Section 3 <span id="viewno"></span> </a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="lA">
            <p>I'm in Section A.<span id="viewcntno"></span></p>
        </div>
        <div class="tab-pane" id="lB">
            <p>Howdy, I'm in Section B.<span id="viewcntno"></span></p>
        </div>
        <div class="tab-pane" id="lC">
            <p>This is Section C.<span id="viewcntno"></span></p>
        </div>
    </div>
</div>

现在，我希望能够在单击左侧的相应链接时增加文章视图计数，然后在文章标题中显示更新的计数。

我目前使用了以下略微修改过的javascript代码（来自here）：

    <script type="text/javascript">
        var js_articleid = document.getElementById("viewarticle").getAttribute("articleid");
        alert(js_articleid);
        document.getElementById("viewarticle").onclick = function () {            
            // ajax start
            var xhr;
            if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers
            else xhr = new ActiveXObject("Microsoft.XMLHTTP");     // for IE

            var url = 'viewarticlecount.php?aid=' + js_articleid;
            xhr.open('GET', url, false);
            xhr.onreadystatechange = function () {
                if (xhr.readyState===4 && xhr.status===200) {
                    var div = document.getElementById('viewno');
                    div.innerHTML = xhr.responseText;
                    var div = document.getElementById('viewcntno');
                    div.innerHTML = xhr.responseText;
                }
            };
            xhr.send();
            // ajax stop
            return false;
        };
    </script>

和相应的php：

//  This sets the timezone to IST
    date_default_timezone_set('Asia/Kolkata');  

    include 'connect.php';
    $articletbl="tbl_articles";
    $articleid=$_GET['aid'];

    $sql_articlecnt="UPDATE $articletbl SET `views`=`views`+1 WHERE `id`='$articleid'";
    $result_articlecnt=  mysqli_query($con, $sql_articlecnt);

    $sql_articlecount="SELECT * FROM $articletbl WHERE `id`='$articleid'";
    $result_articlecount=  mysqli_query($con, $sql_articlecount);
    $data_count=  mysqli_fetch_array($result_articlecount);
    $articlecount=$data_count['views'];

    echo $articlecount;

?>

我面临的问题是，这仅适用于默认情况下处于活动状态的第一个链接。它似乎不适用于其他文章链接。我哪里错了？是否有遗漏可以确保单击时相应的文章链接将其链接ID传递给Ajax查询，该查询将增加数据库并使用更新的计数恢复？

我有初级PHP技能，刚刚开始探索javascript。任何帮助将不胜感激。

谢谢！

Answer 1

最好的方法是从数据库中获取视图数并将其存储到某个隐藏字段。回发页面后，您将获得隐藏的字段值。将其递增1并将其存储到数据库。然后，您可以在回发期间更新隐藏的字段值。

最好使用Jquery，EXTJS等一些js框架来发送所有浏览器支持的网络请求。

希望这有帮助。

Answer 2

我从你的例子中看到的是

<span id="viewcntno"></span>

在每个部分重复。这可能就是为什么只有第一篇文章获得更新的计数。只需使用“class”而不是ID和其他一些属性（如rel）来指示哪个部分必须更新。

希望这有帮助

增量视图使用Javascript / Ajax进行多篇文章超链接的文章计数

2 个答案: