从HTML / PHP页面获取AJAX Post的正确变量

Question

In my HTML , I loop thru a PHP / MySQL query result and do something that makes HTML like this as the end result:

loop 1

<p>- user review-</p>
<a href=#" id="upvote">Up Vote</a>

loop 2

<p>- user review-</p>
<a href=#" id="upvote">Up Vote</a>

 etc.

Now, when the user clicks "up vote", I simply want an AJAX POST to send to a PHP script that looks like this:

// jQuery / AJAX - separate file linked to `HTML`

$('#upvote').onclick(function() {
        var user_id =  ??????;
        var review_id = ?????;
        $.ajax({
            url : "search_query.php",
            type : "POST",
            dataType: "json",  
            data : {
                userId : user_id,
                reviewId : review_id
            },
            success : function(data) {
                // do stuff
            }
});

// php

<?php
    $review_id = $database->escape_value(trim($_POST['reviewId']));
    $user_id= $database->escape_value(trim($_POST['userId']));

    // Upvote Method
    $result = Data::upVoteReview($review_id, $user_id);

    // Not discussed in question  
    $output["result"] = $result;
    print(json_encode($output));
?>

My question is: I need to grab two variables from HTML and put in the AJAX POST ; as you see above, they are reviewId and userId . (Note the user_id is the logged in user and is actually stored as a global PHP SESSION variable.)

The difficult part is the HTML is dynamic, and each loop will have a different review_id. The user_id will be the same but I am not sure how to get that from a SESSION var to the JavaScript. Note: In each "loop" on the HTML page I do have access to the review_id php variable that I need - just not sure where to place it so I can pick it up in jQuery / AJAX .

Answer 1

Use classes instead of IDs as propper markup there should be only 1 ID of a given name per page.

HTML

loop 1

<p>- user review-</p>
<a href="#" class="upvote" data-review="1">Up Vote</a>

loop 2

<p>- user review-</p>
<a href="#" class="upvote" data-review="2">Up Vote</a>

 etc.

JS

// jQuery / AJAX - separate file linked to `HTML`

$('.upvote').on('click', function(e) {
        e.preventDefault();

        var review_id = this.data('review');
        $.ajax({
            url : "search_query.php",
            type : "POST",
            dataType: "json",  
            data : {
                reviewId : review_id
            },
            success : function(data) {
                // do stuff
            }
});

PHP

<?php
    $review_id = $database->escape_value(trim($_POST['reviewId']));

  // Upvote Method
    $result = Data::upVoteReview($review_id, $_SESSION['user_id']);

    $output["result"] = $result;
    print(json_encode($output));
?>

Answer 2

There seem to be quite a few problems in your code, the first couple of ones I've noticed are the following:

The first one:

loop 1

<p>- user review-</p>
<a href=#" id="upvote">Up Vote</a> <------------------------------Here

loop 2

<p>- user review-</p>
<a href=#" id="upvote">Up Vote</a> <-------------------------------Here

 etc.

You are missing the opening quotes, ie it should be href="#" not href=#"

Second is:

$('#upvote').onclick(function() {

should probably be as jQuery does not have onclick function, it definitely has on function.

$('#upvote').on('click', function() {