jquery AJAX가 PHP 변수를 업데이트하지 않기를 요청했습니다.

Question

만화책 웹 사이트 Hitting Trees with Sticks을 사용하여 다음 또는 이전의 화살표 키를 눌러 다음, 이전 또는 임의의 만화 ID를 가져올 수 있습니다.

이미지가 데이터베이스에 저장되므로 클라이언트 측에서 이러한 이미지를 순환시키는 유일한 방법은 자바 스크립트 배열에 이미지를 저장하고 phg $ imgid를 imgIndex라는 javascript 변수에 저장하는 것입니다. 그런 다음 키보드 키를 누를 때 클라이언트 측에서 해당 인덱스를 변경할 수 있습니다.

사용자가 키를 누르면 URL에서 imgid를 변경하기 위해 pushstate를 사용하지만 서버 측 $ imgid를 실제로 업데이트하지는 않습니다. 나는 각각의 특정 ID와 liking 함수를 연관 짓고 있기 때문에 서버 측 $ imgid를 업데이트해야한다. 그러나 현재, 새로운 ID를 얻기 위해 키를 누를 때 img ID와 관련된 총 좋아하는 것이 새로 고침/업데이트되지 않는다. 영상.

내 솔루션은 PushState를 사용하여 URL을 업데이트하는 것이 아니라 키를 누르면 $ .post를 사용하여 업데이트 된 imgIndex를 PHP 스크립트로 보냅니다.

여기에 조각입니다 :

KeyInput.php는 :

<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 스크립트를 호출 ... 자바 스크립트 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 

의견이 있으십니까?

감사합니다.

Answer 1

코드의 문제는 페이지가 이미로드 된 후 Ajax 코드를 사용하여 초기 페이지로드에 대해 $_get 변수를 변경하려고하는 것입니다. AFAIK, 당신은 그것의 ID를 바꾸기 위해 "Facebook like"버튼을위한 전체 페이지를 업데이트해야합니다. 또 다른 옵션은 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

동적을 원하는 경우 : 코드에서 데이터가 작동하지 않는 이유는, 당신에게 다시 전송되는하지만 당신은 그것을 전혀 사용하지 않는 같은 버튼의 URL을 변경, this 대답을 봐. 여기

는 작업 예 바이올린입니다 : http://jsfiddle.net/TkFma/4/