0

我有一个漫画网站，Hitting Trees with Sticks，它允许用户通过按下一个或简单地按箭头键来获取下一个、上一个或随机漫画 ID。

由于图像存储在数据库中，我在客户端循环浏览这些图像的唯一方法是将它们存储在 javascript 数组中，并将 php $imgid 作为 imgIndex 存储在 javascript 变量中。然后，当他们按下键盘键时，我可以在客户端更改该索引。

当用户按下一个键时，我使用 pushstate 来更改 URL 中的 imgid，但这实际上并没有更新服务器端的 $imgid。我需要更新服务器端 $imgid 因为我将一个喜欢功能与每个特定 ID 相关联......但是目前，当我按下一个键来获取一个新的 ID 时，与一个 img ID 关联的总喜欢不会刷新/更新图片。

我的解决方案是不仅使用 PushState 更新 URL，而且当按下某个键时，我使用 $.post，并将更新后的 imgIndex 发送到 php 脚本。

以下是片段：

KeyInput.php：这是客户端javascript：

<script type="text/javascript">
  var imgArray = [<?php echo implode(',', getImages($site)) ?>];
  var imgIndex = <?php echo $imgid ?>;

$(document).ready(function() {      
    var img = document.getElementById("showimg");
    img.src = imgArray[<?php echo $imgid ?>];

    $(document).keydown(function (e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) 
        {
            imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
            window.history.pushState(null, null, '.?action=viewimage&site=comics&id=' + imgIndex);

            $.post('./templates/viewimage.php', { _newImgId : imgIndex },
                function(data) {
                    //alert(data);
                }
            );

        }

viewimage.php这是最初获取 $imgid 的文件，然后它调用 keyInput.php 脚本来接受键输入......这会改变 javascript imgid。出于测试目的，我尝试使用 $.post 和 $.get AJAX 发送更新后的 imgid，如下所示，即$newID = $_POST['_newImgId];. 当我回显 $newID 时，它说它没有定义。

<?php 
/*
Controls display of comic on the viewComic template
*/
include 'include/header.php';

global $site, $imgid;

$cat = (isset($_GET['cat']) ? ($_GET['cat']) : null); 
$site = (isset($_GET['site']) ? ($_GET['site']) : null);
$title = (isset($_GET['title']) ? ($_GET['title']) : null);
$imgid = $_GET['id']; 

include './scripts/keyinput.php'; 

$newID = $_POST['_newImgId];
echo $newID; //THIS SHOULD ECHO THE UPDATED ID, but it says it is not defined

有什么想法吗？

谢谢！

4

1 回答 1

1

我认为您的代码的问题在于您在页面加载后使用 Ajax 代码，同时尝试更改$_get初始页面加载的变量。AFAIK，您需要更新“Facebook 赞”按钮的整个页面以更改其 ID。另一种选择是使用 iframe。据我所知，按钮的data-href属性总是导致http://hittingtreeswithsticks.com/- 并且只能通过使用不同的属性重新加载页面来更改。

如果您不介意为每张图片加载一个页面，这可以为您解决：

<!-- This is the Like button code -->
<div [...] data-href="http://www.hittingtreeswithsticks.com/<?php echo $_get['id']; ?>"></div>

这个页面的地址是：http://www.hittingtreeswithsticks.com/?id=PAGE_ID

编辑

使用 AJAX，您需要从后端调用数据以在客户端使用，而无需重新加载整个页面。然后可以使用此数据来更改客户端中的代码。在您的代码中，数据被发送回给您，但您根本没有使用它，这就是它不起作用的原因：

$.get('./templates/viewimage.php', { _newImgId : imgIndex },
    function(data) {
        // This is where you should make use of the data received 
    }
);

编辑#2

如果您想动态更改 Like 按钮的 url，请查看此答案。

这是一个工作示例的小提琴：http: //jsfiddle.net/TkFma/4/

于 2013-02-18T19:19:42.130 回答