Question

我想弄清楚这一点，我想我差不多了，但我很难搞清楚如何正确使用这些变量。

我正在制作一个页面，允许用户对三种颜色M＆amp; Ms中的一种进行投票。通过点击主html页面上M＆amp; M之一的图片，您的投票将使用JQuery / AJAX转移到php页面，然后PHP页面将更新数据库。

我的PHP页面和Dbase都很好。我很难弄清楚我是如何格式化我的HTML页面以通过正确的信息发送到我的php页面，这样当点击红色M＆amp; 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

将点击处理程序附加到每个锚点
将父div的id作为post参数发送
请求完成后，使用结果中的计数更新相应的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>

使用AJAX / JQuery投票页面

4 个答案: