如何使用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網址

<?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++; 
 
} 
 

 

 
?>