如何将PHP数组传递给Ajax函数

时间:2018-12-31 06:46:26

标签: php jquery ajax

所以我想将PHP数组值从此表单ID传递给我的Ajax表单。一切正常,除了只显示(1)id号。     这是我的表单代码:我将$ 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票。任何建议都非常感谢,在此先感谢!

2 个答案:

答案 0 :(得分:2)

如果您使用循环来填充行ID,那么看起来好像是您的问题。

该循环在循环的每次迭代中创建一个隐藏的输入元素,并且您没有更改该元素的ID。因此,您将拥有一堆具有相同ID的元素。那会以几种不同的方式给您带来麻烦。

我更改了您的PHP代码,以便每个元素都有其自己的ID。我还更改了您的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;
                }
            }
        }

答案 1 :(得分:1)

问题在于,在事件处理程序中,您通过id来寻址元素,而单击时并不一定总是相同。

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();

如果您有多个具有相同ID的元素,则它是无效的HTML,至少它将在https://validator.w3.org/发出警告。 因此,只有在元素唯一的情况下,才应为其设置id arg,并且具有这种思维方式将帮助您避免再次遇到类似问题。