使用AJAX/JQuery的投票页面

Question

我想弄清楚这一点，我想我几乎在那里，但我困惑着搞清楚如何正确使用变量。

我正在制作一个页面，允许用户对三种颜色中的一种进行投票M &女士通过在主html页面上单击M & M之一的图片，您的投票将转入php页面使用JQuery/AJAX，然后PHP页面将更新DBase。

我的PHP页面和Dbase都很好。我被困在试图弄清楚我如何格式化我的HTML页面，以通过正确的信息发送到我的php页面，以便当点击红色的M & M时，该信息将会去，蓝色等等等等。

这里是我的HTML链接：

<div id="red"> 
<a href="#"><img src="images/red.jpg" width="100%" /></a> 
</div> 

<div id="blue"> 
<a href="#"><img src="images/blue.jpg" width="100%" /></a> 
</div> 

<div id="green"> 
<a href="#"><img src="images/green.jpg" width="100%" /></a> 
</div> 

，我要到使用jQuery和AJAX来再接收更新的投票数我的PHP页面发送这些。我将如何制定AJAX/jQuery命令，以便在单击每个链接时发送该链接的颜色？我不需要这里的确切代码，只需要一个或两个指针就可以提供帮助。

Answer 1

HTML：

<div id="red" data-color="red" class="answer"> 
    ... 
</div> 
<div id="blue" data-color="green" class="answer"> 
    ... 
</div> 
<div id="green" data-color="blue" class="answer"> 
    ... 
</div> 

JS：

$('.answer').click (function (e) { 
    var color = $(this).attr("data-color"); 
    $.ajax({ 
     url: '/your/relative/endpoint', 
     type: 'POST', 
     data: '{ color: "'+color+'" }', 
     success: function (res) { 
      ... 
     }, 
     error: function (jqXHR) { 
      ... 
     } 
    }) 
}) 

这将跟踪每一种颜色并点击上用适当的颜色请求到服务器。请记住，您应该清理输入服务器端。

Answer 2

1. 附加一个单击处理程序每​​个锚
2. 在Ajax请求发送父div的ID作为之后的参数
3. 一旦请求完成，更新从计数相应的div结果

Answer 3

尼克的回答是好只是认为我会给你多一个选择：

<div id="red"> 
<a href="/vote.php?color=red" class='vote'><img src="images/red.jpg" width="100%" /></a> 
</div> 

<div id="blue"> 
<a href="/vote.php?color=blue" class='vote'><img src="images/blue.jpg" width="100%" /></a> 
</div> 

<div id="green"> 
<a href="/vote.php?color=green" class='vote'><img src="images/green.jpg" width="100%" /></a> 
</div> 

Javascript/jquery：

$('.vote').click(function() { 
    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('href'), 
     cache: false, 
     success: function(resp){ 

     } 
    }); 
    return false; 
}); 

Answer 4

很简单。

/****** JQUERY *******/ 

/** 
* SEND NEW VOTE 
* @param int color id of color 
*/ 
function SendVote(color){ 
    var count = ''; 
    if(color == 1){ 
     count = 'red'; 
    } 
    if(color == 2){ 
     count == 'blue'; 
    } 
    if(color == 3){ 
     count == 'green'; 
    } 

    //send data via ajax, 
    var queryParams = {'color':color}; 
    $.ajax({ 
     data: queryParams, 
     type: "post", 
     url: 'path/to/vote.php' 
     beforeSend: function(){ // here you could add a loader (if you want) 
      //show loader 
     }, 
     success: function(response){ // success here you get the response from the server 
      //response is not empty 
      if(response.length > 0){ 
       $("#"+count+' span').html(response+' votes'); // then change the number of the counter 
      }else{ 
       //and error on php, cause there response but is empty 
      } 
     }, 
     fail: function(e){ //get fail ajax errors 
      console.log('fail '+e); 
     }, 
     error: function(e){ // get errors 
      console.log('error '+e); 
     } 
    }); 
} 

/*** ON vote.php (or your php script) *****/ 

if(isset($_POST['color'])){ 

    //do the things to add the new vote 

    //then echo the total of votes for the color 
    echo getVotes($_POST['color']); //this is the response that ajax will get 
} 

/********** html *******/ 

<div id="red"> 
<a href="#" onclick="SendVote(1)"><img src="images/red.jpg" width="100%" /></a> 
<span> 
    5 votes 
</span> 
</div> 

<div id="blue"> 
<a href="#" onclick="SendVote(2)"><img src="images/blue.jpg" width="100%" /></a> 
<span> 
    4 votes 
</span> 
</div> 

<div id="green"> 
<a href="#" onclick="SendVote(3)"><img src="images/green.jpg" width="100%" /></a> 
<span> 
    0 votes 
</span> 
</div>