使用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>