1

私はこれを理解しようとしています。私はもうすぐそこにいると思いますが、変数を適切に使用する方法を理解するのに行き詰まっています。

ユーザーが3つのカラーM＆Mのいずれかに投票できるページを作成しています。メインのhtmlページにあるM＆Mの画像をクリックすると、投票がJQuery / AJAXを使用してphpページに引き継がれ、PHPページがDBaseを更新します。

私のPHPページとDbaseは問題ありません。赤のM＆Mをクリックすると、その情報が青に表示されるように、HTMLページをどのように正確にフォーマットして適切な情報をphpページに送信できるかを理解しようとしています。

これが私の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コマンドをどのように作成しますか？ここでは正確なコードは必要ありません。1つまたは2つのポインターが役立ちます。

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

ニックの答えは良いです。もう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 に答える