循环中的AJAX响应问题

时间:2017-11-19 20:15:50

标签: javascript php jquery html ajax

我想让ajax更新两件不同的东西。一个是单击的按钮类,第二个是while循环中的数据库记录

主页

<?php
    $q = mysqli_query($cn, "select * from `com`");
    while ($f = mysqli_fetch_array($q)) {
    ?>
    com: <?php echo $f['com']; ?><br>
    <?php
        $q1 = mysqli_query($cn, "select * from `fvc` where m_id='" . $f['id'] . "' and log='" . $_SESSION['id'] . "'");
        $q2 = mysqli_query($cn, "select * from `fvc` where log='" . $_SESSION['id'] . "'");
    ?>
         <span class="result<?php echo $f['id']; ?>">
         <?php if (mysqli_num_rows($q1) > 0) { ?>
               <button value="<?php echo $f['id']; ?>" class="unfc"><i title="<?php echo mysqli_num_rows($q2); ?>" class="fa fa-star" aria-hidden="true"></i></button>
         <?php } else { ?>
               <button value="<?php echo $f['id']; ?>" class="fc"><i title="<?php echo mysqli_num_rows($q2); ?>" class="fa fa-star-o" aria-hidden="true"></i></button>
         <?php } ?>
         </span>
    <?php
      }
    ?>

AJAX

$(document).ready(function(){

            $(document).on('click', '.fc', function(){
                var id=$(this).val();
                $.ajax({
                        type: "POST",
                        url: "vote.php",
                        data: {
                            id: id,
                            vote: 1,
                        },
                        success: function(){
                            showresult(id);
                        }
                    });
            });

            $(document).on('click', '.unfc', function(){
                var id=$(this).val();
                $.ajax({
                        type: "POST",
                        url: "vote.php",
                        data: {
                            id: id,
                            vote: 1,
                        },
                        success: function(){
                            showresult(id);
                        }
                    });
            });

        });

    function showresult(id){
            $.ajax({
                url: 'result.php',
                type: 'POST',
                async: false,
                data:{
                    id: id,
                    showresult: 1
                },
                success: function(response){
                    $('.result'+id).html(response);

                }
            });
        }

result.php

<?php
        session_start();
        include('cn.php');

        if (isset($_POST['showresult'])){
            $id = $_POST['id'];
            $q3=mysqli_query($cn, "select * from `fvc` where m_id='".$id."' and log='".$_SESSION['id']."'");
            $q4=mysqli_query($cn,"select * from `fvc` where log='".$_SESSION['id']."'");
            $numFavs = mysqli_num_rows($q4);
            if (mysqli_num_rows($q3)>0){
            echo '<button class="unfc" value="'.$id.'"><i title="'.$numFavs.'" class="fa fa-star" aria-hidden="true"></i></button>' ;
            } else {
            echo '<button class="fc" value="'.$id.'"><i title="'.$numFavs.'" class="fa fa-star-o" aria-hidden="true"></i></button>' ;
                }   
            }   
    ?>

while循环中所有注释的行响应总数未更新。 我希望在每个评论的Ajax响应中更新循环ID所以引导我在我的代码中有什么错误

2 个答案:

答案 0 :(得分:0)

当然它只更新一个元素,你的show_like函数只更新一个元素,一个id =#show_like'+ id

如果您想要更新所有span元素,请创建一个函数update_likes()并在成功时调用它而不是show_like()

$(document).on('click', '.favcom', function(){
            var id=$(this).val();
            $.ajax({
                    type: "POST",
                    url: "like.php",
                    data: {
                        id: id,
                        like: 1,
                    },
                    success: function(){
                        update_likes('.favcom');
                    }
                });
        });

然后遍历span元素并更新其中的每一个,如果您有其他跨度而不是.show_like放置您的类,则可以添加一个类$("span")

function update_likes(class){
    $(class).each(function() {
        show_like( $(this).val() );
    });
}

我希望这可行,但是,这是基于你的代码,它会产生很多http请求(在show_like()),我建议你通过尝试返回所需的所有数据来改进它循环遍历数组,而不是每次都进行Ajax调用。

答案 1 :(得分:0)

您的成功功能是按ID定位元素,因此页面上有一个特定元素。如果要更新多个值,则需要定位要定位的元素通用的类或元素类型。

按钮有两个类,所以你可以使用它们。您必须更改PHP输出,以便它只返回新的喜欢总数,不需要HTML输出。

你在showLike中的成功函数看起来像这样:

$(':button[value="'+id+'"]').toggleClass('favcom unfavcom');
$('.unfavcom').html('<i title="Remove from Favorite? - ('+response+'/20)" class="fa fa-star" aria-hidden="true"></i>');
$('.favcom').html('<i title="Favorite Comment - ('+response+'/20)" class="fa fa-star" aria-hidden="true"></i>');