Как передать массив PHP в функцию AJAX

Question

Итак, я хотел бы передать значения массива php из этого идентификатора формы в мою форму ajax.Все работает отлично, за исключением того, что он будет отображать только (1) идентификатор.Вот мой код формы: я передаю $ row [topic_id '] в качестве значения, чтобы получить идентификатор для jquery.

public function forumview($query){
    $stmt = $this->db->prepare($query);
    $stmt->execute();
    $results = $stmt->fetchAll();

    if($stmt->rowCount()>0){
        foreach($results as $row){

            echo '<tr>';
            echo '<td style="color: #333;"><span class="pull-right">';

    //Problem is here with the $row['topic_id'] portion
    if(isset($_SESSION['user_session'])){
            echo '<a href="#" class="upVoteArrow" 
                   onclick="upVoteIncrementValue('.$row['topic_id'].');">';
        }else{                  
            echo '<a href="#" id="loginForm" class="upVoteArrow" data- 
                  toggle="modal" data-target="#loginModal"><i class="fa fa-arrow-up"></i> 
                  </a>';                
        }
         echo '<span id="voteCount">'.$this->cleanNumber($row['topic_likes']).'</span>';
      }

Вот мой Ajax-вызов для отправки информации в мой php-файл

function upVoteIncrementValue(postID){
   event.preventDefault();
    //var upVoteIncrement   = $("#upVoteIncrement").val();  //not needed

$.ajax({
        type: "POST",
        url: "voting.php",
        data:  {
            "upVoteIncrement": postID,
            },
        dataType: "json",
        cache: false,
        success: function(response){
            if(response){
                var response = $.trim(response);
                if(response){
                    $('#voteCount').html(response);
                }
                else {
                    return false;
                }
            }
        }
    });

Тогда вот php-файл, который обрабатывает вызов.

if(isset($_POST['upVoteIncrement'])){

$upVoteIncrement = $_POST['upVoteIncrement'];

$stmt = $conn->prepare('UPDATE topics SET topic_likes = topic_likes+1 WHERE topic_id = :id LIMIT 1');
$stmt->bindParam(':id', $upVoteIncrement);
$stmt->execute();


$upVote = $conn->prepare('SELECT topic_likes FROM topics WHERE topic_id = :id LIMIT 1');
$upVote->bindParam(':id', $upVoteIncrement);
$upVote->execute();
$upVoteCount = $upVote->fetchAll();

if($upVote->rowCount() > 0){
    foreach($upVoteCount as $row){

        $up = $row['topic_likes'];
        $results[] = $up;
        //exit();  //not needed
    }
}
echo json_encode($results);
}

По сути, я просто создаю простую систему голосования, по которой пользователь нажимает, и она обновляет базу данных, увеличивая ее на 1.Он увеличивает значения и все работает, за исключением того, что он будет увеличивать его только для последнего опубликованного элемента.Так что даже если я откажусь от предыдущей темы, это добавит только 1 голос к последней добавленной теме.Любой совет высоко ценится, спасибо заранее!

Answer 1

Проблема в том, что в обработчике событий вы обращаетесь к элементу по идентификатору, а при щелчке он не всегда совпадает.

function upVoteIncrementValue(){
   event.preventDefault();
// Always will be last inserted element
var upVoteIncrement = $("#upVoteIncrement").val();

Вы можете использовать событие, чтобы получить действительный элемент.Это аргумент по умолчанию, который передается обработчику, но не забудьте определить его без скобок:

 <input onclick="upVoteIncrementValue" />

Тогда ваш обработчик:

function upVoteIncrementValue(event){
   event.preventDefault();
var upVoteIncrement = $(event.target).val();

Также, если у вас есть несколько элементов с одинаковым идентификатором, это недопустимоHTML, по крайней мере, он выдаст предупреждение на https://validator.w3.org/.Поэтому вы должны устанавливать id arg для вашего элемента только в том случае, если он уникален, и наличие этого мышления поможет вам больше не сталкиваться с подобной проблемой.

Answer 2

Если вы используете цикл для заполнения идентификатора строки, который выглядит так, как будто вы здесь, это ваши проблемы.

Цикл создает скрытый элемент ввода на каждой итерации цикла, и вы не меняетеидентификатор элемента.Таким образом, у вас будет множество элементов с одинаковым идентификатором.Это создаст вам проблемы несколькими разными способами.

Я изменил ваш PHP-код, чтобы у каждого элемента был свой идентификатор.Я также изменил вашу функцию javascript, чтобы значение id передавалось самой функции.

Посмотрите, поможет ли это:

PHP:

if(isset($_SESSION['user_session'])){

  echo '<input type="hidden" id="' . $row['topic_id'] . '" name="upVoteIncrement" 
  value="' . $row['topic_id'] . '"><a href="#" class="upVoteArrow" 
  onclick="upVoteIncrementValue(' . $row['topic_id']  . ');">';

}

JS:

function upVoteIncrementValue(postID){
   event.preventDefault();
    //var upVoteIncrement = $("#upVoteIncrement").val(); //Don't need this anymore.

$.ajax({
        type: "POST",
        url: "voting.php",
        data:  {
            "upVoteIncrement": postID, //Use the passed value id value in the function.
            },
        dataType: "html",
        cache: false,
        success: function(response){
            if(response){
                var response = $.trim(response);
                if(response){
                    $('#voteCount').html(response);
                }
                else {
                    return false;
                }
            }
        }
    });

Надеюсь, это поможет!

Я также хочу отметить, что в приведенном ниже коде:

if($upVote->rowCount() > 0){
    foreach($upVoteCount as $row){

        $up = $row['topic_likes'];
        echo $up;
        exit();
    }
}

Вы выходите из сценария на первой итерациицикл и вы получите только один результат обратно.

Если вам нужно вернуть массив данных, он должен выглядеть следующим образом:

if($upVote->rowCount() > 0){
    foreach($upVoteCount as $row){

        $up = $row['topic_likes'];
        $results[] =  $up;
        //exit(); 
    }
}

echo json_encode($results);

Затем вам нужно будет установить тип данных вjson вместо html.

Ответ в вашем ajax теперь будет массивом.Чтобы увидеть массив:

success: function(response){
            if(response){
                console.log(response); //Look in your console to see your data.
                var response = $.trim(response);
                if(response){
                    $('#voteCount').html(response);
                }
                else {
                    return false;
                }
            }
        }