jQuery AJAX请求不更新php变量 [英] jquery AJAX requests not updating php variable

问题描述

我有一个漫画网站，用棍子击中树木，允许用户获取下一个，上一个或随机的漫画通过按next或直接按箭头键来获取id.

I have a comics website, Hitting Trees with Sticks, that allows a user to get next, previous, or random comic id by pressing next or simply pressing arrow keys.

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

Since images are stored in a database, the only way for me cycle through these images on the client side was to store them in a javascript array, and store the php $imgid in a javascript variable as imgIndex. Then I could alter that index on the client side when they press keyboard keys.

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

When the user presses a key, I'm using pushstate to alter the imgid in the URL, but that's not actually updating the server side $imgid. I need to update the server side $imgid because I'm associating a liking function with each specific ID... but currently, the total likes associated with an img ID won't refresh/update when I press a key to get a new image.

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

My solution was to not only use the PushState to update the URL, but when a key is pressed, I use a $.post, and send the updated imgIndex to the php script.

以下是摘要:

KeyInput.php :这是客户端javascript:

KeyInput.php: This is the client-side 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时，它说未定义.

viewimage.php This is the file that originally gets the $imgid, then it calls the keyInput.php script to accept key input... that alters the javascript imgid. For testing purposes, I've tried using $.post and $.get AJAX to send the updated imgid, as you can see below, that's $newID = $_POST['_newImgId];. When I echo out $newID, it says it's not defined.

<?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

有什么想法吗?

谢谢！

推荐答案

我认为您的代码存在的问题是，您已经在页面加载后使用Ajax代码，同时尝试更改$_get变量.初始页面加载. AFAIK，您需要更新整个页面，例如"Facebook like"按钮才能更改其ID.另一种选择是使用iframe.据我所知，按钮的data-href属性总是指向http://hittingtreeswithsticks.com/-只能通过使用其他属性重新加载页面来更改.

I think the problem with your code is that you are using your Ajax code after the page has already loaded, while trying to change the $_get variables for the initial page load. AFAIK, you need to update the entire page for the "Facebook like" button to change it's ID. Another option would be to use an Iframe. From what I can see, the button's data-href attributes always leads to http://hittingtreeswithsticks.com/ - and that can only be changed by reloading the page using a different attribute.

如果您不介意为每张图片加载页面，则可以为您解决:

If you don't mind loading a page for each picture, this can work out for you:

<!-- 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，您需要从后端调用要在客户端使用的数据，而不必重新加载整个页面.然后，可以使用此数据来更改客户端中的代码.在您的代码中，数据被发送回给您，但您根本没有使用它，这就是为什么它不起作用的原因:

Using AJAX, you are calling for data from the backend to be used in the client side, without having to reload the entire page. This data can then be used to alter the code in the client side. In your code, the data is being sent back to you but you are not using it at all, that's why it doesn't work:

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

编辑#2

如果要动态更改赞"按钮的网址，请查看此答案.

If you want to dynamically change the Like button's url, take a look at this answer.

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

Here is a fiddle of the working example: http://jsfiddle.net/TkFma/4/

这篇关于jQuery AJAX请求不更新php变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！