Ajax呼吁加载朋友和显示在个人资料页面

Question

试着想出这个ajax的东西 - 我不熟悉它。现在我有一个在选项卡中设置的个人资料页面。 。

在朋友标签下，我默认将显示限制为5。

使用以下代码可以轻松完成此操作。

<?php 
global $con;

$username = $_GET['profile_username'];

$query = mysqli_query($con,"SELECT * FROM users WHERE friend_array LIKE '$username,%' OR friend_array LIKE '%,$username,%' OR friend_array LIKE '%,$username' LIMIT 0,5"); 
?>

<div class="panel-body">
<ul>
    <?php
        while ($row = mysqli_fetch_array($query)) {
        $friends = $row['profile_pic']; 
        $friend_username = $row['username'];
    ?>
  <li><a class="thumbnail pull-left" href="<?php echo $friend_username; ?>">
<img src="<?php echo $friends; ?>" title="<?php echo $friend_username; ?>"></a></li><?php } ?>
</ul>
<div class="clearfix"></div>
<input class="btn btn-default" type="submit" id="ViewAllFriends" 
name="ViewAllFriends" value="View All Friends">
</div>

最初我有查看所有朋友按钮调用显示所有朋友的另一个查询，这很有效，但页面刷新了＆amp;这样做会切换到我已设置为活动状态的“关于”选项卡。

我以为我会尝试ajax来打这个电话，这样页面就不会被刷新，但是对于我来说这是个新问题我有一些问题。这就是我所拥有的：

         function ajaxfriends(){

        $.ajax({

            url:'includes/handlers/ajax_load_profile_friends.php',
            type:'POST',
            success: function(response){

            }
        });
      }

在ajax_load_profile_friends.php中我有：

 require '../../config/config.php';
 include("../classes/User.php");

        $username = $_GET['profile_username'];

        if(isset($_POST['ViewAllFriends'])) {
            //Query to run if button ViewAllFriends submitted
            $query = mysqli_query($con,"SELECT * FROM users WHERE friend_array LIKE '$username,%' OR friend_array LIKE '%,$username,%' OR friend_array LIKE '%,$username'"); 

我在“查看所有朋友”按钮上由ajaxfriends()调用了函数onclick=。现在我没有得到任何错误，但按钮也没有做任何事情。再一次，我是ajax的新手，所以我知道这就是问题所在;任何帮助，将不胜感激。

三江源。

Answer 1

该页面正在刷新，因为该按钮的类型为submit。将其更改为键入<input type="button"或<button type="button">

如果页面仍然按照按钮的意图执行某些操作，您也可能需要终止事件。因此，您可以绑定js

，而不是直接绑定到onclick属性

$('#ViewAllFriends').click(function(e){
    // The click event to the button will only trigger this function
    // and stop here (not trigger other functions bound to this event)
    e.preventDefault();
    e.stopPropagation();

    // Your code here
    ajaxfriends();
});