2011-07-07 19 views
2

私はこのスター評価システムを正しく持っています。星をクリックすると、関数に値を渡す必要があります。その後、AJAXを使用して、それを外部のPHPファイルに投稿します。唯一の問題は、PHPファイルに到達したときにnullまたは値なしということです。PHPに送信されないAjax値

AJAXを使用して警告ボックスに$ _POST ['vote']変数をエコーし​​ようとしましたが、空白で「NULL」または「0」に戻りません。私はsend()関数まで追跡することができるので、どこで値が失われているのか分かりません。誰か問題が見える?

HTML:

<style type="text/css"> 
    #container{margin: 10px auto;width: 500px;height: 300px;background-color: gray;} 
    #starContainer{padding-top:20px;margin:0 auto;width:150px;} 
    .box{height:28px;width:30px;float:left;position:relative;z-index:5;cursor:pointer;} 
    .star{background-image:url('emptyStar.png');background-repeat:no-repeat;} 
    .starHover{background-image:url('goldStar.png');background-repeat:no-repeat;} 
    #voteBar{float:left;height:28px;background-color:#dbd923;position:relative;top:-28px;z-index:1;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.box').hover(
     // Handles the mouseover 
     function() { 
      $(this).prevAll().andSelf().addClass('starHover'); 
     }, 
     // Handles the mouseout 
     function() { 
      $(this).prevAll().andSelf().removeClass('starHover'); 
     } 
    ); 
}); 

    function Cast(vote) 
    { 
     if(window.XMLHttpRequest) 
     { 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else 
     { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange = function() 
     { 
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
      { 
       alert(xmlhttp.responseText); 
       var json = JSON.parse(xmlhttp.responseText); 
      } 
     } 

     xmlhttp.open("POST", "process.php", true); 
     xmlhttp.send('vote=' + vote); 
    } 
</script> 

</head> 
<body> 

<div id="container"> 
    <center> 
     <div id="starContainer"> 
      <div class="box star" onclick="Cast(1)"></div> 
      <div class="box star" onclick="Cast(2)"></div> 
      <div class="box star" onclick="Cast(3)"></div> 
      <div class="box star" onclick="Cast(4)"></div> 
      <div class="box star" onclick="Cast(5)"></div> 
      <div id="voteBar"></div> 
     </div> 
    </center> 
</div> 

</body> 
</html> 

PHP:あなたはすでにjqueryのを使用している

<?php 
$vote = $_POST['vote']; 

$totalVoteValue = 0; 
$amtVotes = 1; 

$width = (($totalVoteValue + (($vote - $totalVoteValue)/$amtVotes))/5) * 150; 

echo $width; 
?> 

答えて

3
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 

+0

私はそれを試してみたが、そのコード行が問題だと思ったので、私はそれを取り出した。 –

+0

それは確かに質問への最短の答えです。 – bfavaretto

+0

私はそれを理解していません。私はシングルクックではなく、ダブルクォートで元のスクリプトで同じことをしましたが、これを差し込みます。とにかく彼らの弦が同じであるはずです... –

0

(非常に非常に非常に古いバージョンを私が言うのもあれば...)、なぜそれはajaxハンドラに組み込まれて使用しますか?これは(オープン後に送信する前に)役立つかもしれない追加 http://api.jquery.com/jQuery.post/

$.post('process.php', {vote: vote}, function(data) { 
    $('.result').html(data); 
}); 
+0

私だけではないが長すぎる前にAJAXを始めたので、私はそれのためにJavaScriptを使用していた、私はjQueryのより良いJavaScriptのバージョンを理解します1。私はそれを調べます。 –

+0

"better"?そうではありません。jQueryを使用していれば、ブラウザ間の互換性を保証することもできます。とにかく幸運です。 – OneOfOne

関連する問題