javascript - 如何使用 Jquery 重新加载 PHP 查询(包含页面)

Question

我有一个小片段，它是一个评论系统。我试图做到这一点，以便当我按下提交时，表单本身将会刷新，评论也会刷新。

我尝试过使用 AJAX，但当我按“提交”时，我看不到任何实际启动的内容。我的 frontpage.php 包含播放器的每个元素。这是 player_comments.php 的核心:

    <script>

$(document).ready(function() { 
    var options = {
        url: '',
        target: '#comment-text', // target element(s) to be updated with server response
        type: 'post' // 'get' or 'post', override for form's 'method' attribute
    }; 

    // bind form using 'ajaxForm' 
    $('#song-comment-form').ajaxForm(options); 
}); 

</script>

<?
}
if(isset($userId)) {
    /* logged in only */
}

$iComments = 0;
$qComments = $db->query("
SELECT songs_comments.*, user.id AS uId, user.username AS uName, user.avatar AS uAvatar
FROM songs_comments LEFT JOIN user ON songs_comments.userid_from = user.id
WHERE songs_comments.songid = '".$rSong->id."' ORDER BY songs_comments.id DESC");
while ($rComments = $qComments->fetch_object()) {
    $showComments .= '
    <img src="../'.makeAvatar($rComments->uId,$rComments->uAvatar,50).'" class="avatar float-left" alt>
    <div class="comment">
        <div class="comment-text">'.$rComments->text.'</div>
        <div class="comment-footer">
            <a href="/">'.$rComments->uName.'</a> on '.dateStamp($rComments->time).'
        </div>
        <br style="clear:both;">
    </div>
    ';
    $iComments++;
} ?>
<div id="player-song-comments-wrap">
    <div id="player-song-comments-heading"><img src="template/images/icons/comments.png" alt> Comments</div>
    <div id="player-song-comments-sub-heading">
        <?=isset($userId)?'<a href="/" id="show-song-comment-form" class="float-right">Add comment</a>':'<a href="/register.php" class="modal float-right">Add comment</a>'?>
        <span id="song-comments-num"><?=$iComments?></span> comments for "<span id="song-comments-title"><?=$rSong->title?></span>"
        by <span id="song-comments-artist"><?=$rSong->artist?></span>
    </div>
    <hr>
    <form id="song-comment-form">
        <input type="hidden" value="<?=$rSong->id?>" class="song-id">
        <textarea class="editor" id="song-comment-textarea"></textarea><br>
        <input type="submit" value="Submit"><input type="button" value="Cancel" id="hide-song-comment-form">
        <hr>
    </form>
    <div id="player-song-comments">
        <?=$showComments?>
    </div>
</div>

如何才能在单击“提交”时重新加载此包含内容中的所有内容？

Answer 1

这里是你的ajax调用代码

<script>
        $(document).ready(function(){


            $("#submit_data").on('click',function(e){
                $.ajax({
                type:'POST',                   
                url:"player_comments.php",

                success:function(data){
                    console.log(data);
                    $("#player-song-comments-wrap").html(data)
                 }
            });
            });
        });
</script>
<form id="song-comment-form">
   <input type="hidden" value="<?php echo $rSong->id ?>" class="song-id">
   <textarea class="editor" id="song-comment-textarea"></textarea><br>
   <input type="submit" value="Submit" id="submit_data"><input type="button" value="Cancel" id="hide-song-comment-form">
   <hr>
</form>
 

<div id="player-song-comments-wrap">
  
</div>

这里是你的player_comments.php代码，它调用ajax url

<?php
if(isset($userId)) {
    /* logged in only */
}

$iComments = 0;
$qComments = $db->query("
SELECT songs_comments.*, user.id AS uId, user.username AS uName, user.avatar AS uAvatar
FROM songs_comments LEFT JOIN user ON songs_comments.userid_from = user.id
WHERE songs_comments.songid = '".$rSong->id."' ORDER BY songs_comments.id DESC");
while ($rComments = $qComments->fetch_object()) {
    $showComments .= '
    <img src="../'.makeAvatar($rComments->uId,$rComments->uAvatar,50).'" class="avatar float-left" alt>
    <div class="comment">
        <div class="comment-text">'.$rComments->text.'</div>
        <div class="comment-footer">
            <a href="/">'.$rComments->uName.'</a> on '.dateStamp($rComments->time).'
        </div>
        <br style="clear:both;">
    </div>
    ';
    $iComments++;
} 


?>