1

我试图弄清楚这一点，我想我快到了，但我一直在弄清楚如何正确使用变量。

我正在制作一个页面，允许用户对三种颜色的 M&M 中的一种进行投票。通过在主 html 页面上单击其中一个 M&M 的图片，您的投票将被转移到使用 JQuery/AJAX 的 php 页面，然后 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 命令，以便在单击每个链接时发送该链接的颜色？我在这里不需要确切的代码，只需要一两个指针就可以了。

4

4 回答 4

3

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) {
            ...
        }
    })
})

这将跟踪每种颜色并在单击时使用适当的颜色向您的服务器发出请求。请记住，您应该清理输入服务器端。

于 2013-03-04T18:27:42.720 回答
1
  1. 将点击处理程序附加到每个锚点
  2. 在您的 ajax 请求中，将父 div 的 id 作为 post 参数发送
  3. 请求完成后，使用结果中的计数更新相应的 div
于 2013-03-04T18:27:43.250 回答
1

尼克的回答很好，只是想我会给你一个选择：

<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;
});
于 2013-03-04T18:32:11.253 回答
0

很简单。

/****** 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>
于 2013-03-04T18:43:00.360 回答