使用AJAX jQuery投票

时间:2015-04-17 16:04:34

标签: javascript php jquery ajax json

我已经创建了一个简单的轮询,它将使用AJAX JSON jQuery发送到服务器端,并且会被回复。它没有正常工作。请告诉我我哪里出错了。我是jQuery和JSON的新手。

JavaScript

<script>
  function sendVote(){
    var voteS = $("#vote").val();
    $(document).ready(function(){
      $("#vote").click(function(){
        $.ajax({
          type : "POST",
          url : "poll_vote.php",
          data : "vote="+voteS,
          dataType: "JSON",
          success : function(data){
            concole.log("Data Submitted " + data);
            $("#result").html(data);
          },
          complete :function(data){},
          error : function(error, data){
            console.log("Error. not Working" + error+" "+ data);
            alert("Error. not Working"+ error);
            $("#result").html(error+ data);
          }
        });
      });   
    });
  }
</script>

PHP

<?php
$vote = $_POST['vote'];
if (isset($vote)) {
    $list  = array('vote' => $vote);
    $encode = json_encode($list);
 echo $encode;
}
?>

HTML

<body>
  <h3> What is your Gender? </h3>
  <form>
    Male : 
    <input type = "radio" name = "vote" value= "0" id="vote" onclick = "return sendVote()" />
    <br />
    Female :
    <input type = "radio" name = "vote" value = "1" id="vote" onclick = "return sendVote()">
  </form>
  <p><div id= "result"></div></p>

</body>

1 个答案:

答案 0 :(得分:1)

您选择了不明确的选择器,使用了非唯一ID的无效标记。

改变这个:

var voteS = $("#vote").val();

为:

var voteS = $("input[name='vote']:checked").val();

而且,正如您在dataType: "JSON"中指定的那样,您希望成功部分中有一个json对象,因此您只需要在此处访问此对象的vote属性:

$("#result").html(data.vote);

同样成功的是你有错字:concole.log而不是console.log

在PHP文件中,您应该检查是否设置了$_POST['vote']

if (isset($_POST['vote'])) {
    $vote = $_POST['vote'];
    $list  = array('vote' => $vote);
    $encode = json_encode($list);
    echo $encode;
}

从此函数中删除$(document).ready(function(){,在实际调用此函数之前,它不会将此事件绑定到该元素。