为什么我的 AJAX 表单在提交时会刷新页面？

问题描述 投票：0回答：1

我正在创建一个简单的关注/取消关注系统，一切正常，因为它在我关注/取消关注时插入行并删除行，但由于某种原因，它每次都会刷新页面，即使我正在使用 

 e.preventDefault();
，这是为什么呢？谢谢

<div class="followBtns showFollowDiv">
   <form method="POST" action="">
     <input type="hidden" value="<?php echo $username; ?>" name="username">
     <input type="hidden" value="<?php echo $grabUser['username']; ?>" name="following">
     <input type="hidden" value="<?php echo date('Y/m/d H:i:s'); ?>" name="date">

     <div id="followButtonContainer">
       <?php if ($is_following): ?>
         <button class="followBtn" type="button" value="unfollow" name="action">Unfollow</button>
       <?php else: ?>
          <button class="followBtn" type="button" value="follow" name="action">Follow</button>
       <?php endif; ?>
       </div>
      </form>
     </div>

这是我网页底部的脚本：

  <script type="text/javascript">
  //~~~~~~~~~~~~~~~~~~~~ SCRIPT FOR FOLLOWING A USER ~~~~~~~~~~~~~~~~~~~~//
 $(document).ready(function() {
  console.log("Follow function is working..");
  $(".followBtn").on("click", function(e) {
    // Prevent the default behavior of the button
    e.preventDefault();

    // Check if the button triggers the login modal
    if ($(this).hasClass('followBtn-signin')) {
        $('#loginModal').modal('show'); // Show login modal
        return;
    }

    var followButton = $(this);
    var formDataFollow = {
      'FollowUser': true,
      'username': $('input[name="username"]').val(),
      'following': $('input[name="following"]').val(),
      'date': $('input[name="date"]').val(),
      'action': $(this).val()
  };
    console.log(formDataFollow);
    $.ajax({
        type: "POST",
        url: "/Blog/resources/PHP/FollowUserPHP.php",
        data: formDataFollow,
        dataType: 'json',
        success: function(response) {
            $('#followButtonContainer').html(response.button);
            // Toggle the button text based on the response
            if (response.status === "followed") {
                // Increment the follower count on the frontend
                var followerCountElement = $('.follower-count');
                followerCountElement.text(parseInt(followerCountElement.text()) + 1);
            } else if (response.status === "unfollowed") {
                // Decrement the follower count on the frontend
                var followerCountElement = $('.follower-count');
                followerCountElement.text(parseInt(followerCountElement.text()) - 1);
            }
        },
        error: function(xhr, status, error) {
            console.log(error);
        }
    });
  });
});
</script>

这是我的 FollowUserPHP.php:

 <?php
 session_start();
 require_once '/var/www/vhosts/ggweb3.xyz/httpdocs/PHP/connect.php';

 if (isset($_POST['username']) && isset($_POST['following']) && isset($_POST['date']) && isset($_POST['action'])) {
  $username = filter_var($_POST['username'], FILTER_SANITIZE_STRING);
  $following = filter_var($_POST['following'], FILTER_SANITIZE_STRING);
  $date = filter_var($_POST['date'], FILTER_SANITIZE_STRING);
  $action = $_POST['action'];

// Check if the user is already following the viewed user
$stmt_check = $dbh->prepare("SELECT COUNT(*) AS following_count FROM followers WHERE username = :username AND following = :following");
$stmt_check->bindParam(':username', $username, PDO::PARAM_STR);
$stmt_check->bindParam(':following', $following, PDO::PARAM_STR);
$stmt_check->execute();
$fetchFollowing = $stmt_check->fetch();
$is_following = ($fetchFollowing['following_count'] > 0);

if ($action == 'follow' && !$is_following) {
    $stmt = $dbh->prepare("INSERT INTO `followers` (`username`, `following`, `date`) VALUES (:username, :following, :date)");
    $stmt->bindParam(':username', $username, PDO::PARAM_STR);
    $stmt->bindParam(':following', $following, PDO::PARAM_STR);
    $stmt->bindParam(':date', $date, PDO::PARAM_STR);
    $stmt->execute();
    $response = array('status' => 'followed', 'button' => '<button class="followBtn" type="button" value="unfollow" name="action">Unfollow</button>');
} elseif ($action == 'unfollow' && $is_following) {
    $stmt = $dbh->prepare("DELETE FROM `followers` WHERE `username` = :username AND `following` = :following");
    $stmt->bindParam(':username', $username, PDO::PARAM_STR);
    $stmt->bindParam(':following', $following, PDO::PARAM_STR);
    $stmt->execute();
    $response = array('status' => 'unfollowed', 'button' => '<button class="followBtn" type="button" value="follow" name="action">Follow</button>');
   } else {
    // Invalid action value or user is already following/unfollowing
    $response = array('error' => 'Invalid action or user is already following/unfollowing');
}
} else {
// Missing parameters
$response = array('error' => 'Missing parameters');
}

// Output the response as JSON
header('Content-Type: application/json');
echo json_encode($response);
exit;
?>
javascript php html ajax
1个回答
0
投票

当您在 AJAX 回调中执行 

$('#followButtonContainer').html(response.button);
操作时，您将使用新按钮替换关注按钮。这个新按钮没有事件侦听器（即在页面加载时创建），因此您需要向该新按钮添加事件侦听器，或者在未替换的父元素上设置事件侦听器。

这里我在回调中再次添加了事件监听：

$(document).ready(function() {
  console.log("Follow function is working..");
  $(".followBtn").on("click", followClicked);
});

function followClicked(e) {
  // Check if the button triggers the login modal
  if ($(this).hasClass('followBtn-signin')) {
    $('#loginModal').modal('show'); // Show login modal
    return;
  }

  var followButton = $(this);
  var formDataFollow = {
    'FollowUser': true,
    'username': $('input[name="username"]').val(),
    'following': $('input[name="following"]').val(),
    'date': $('input[name="date"]').val(),
    'action': $(this).val()
  };
  console.log(formDataFollow);
  $.ajax({
    type: "POST",
    url: `data:application/json,{"button":"<button class='followBtn' type='button' value='unfollow' name='action'>Unfollow</button>","status":"followed"}`,
    data: formDataFollow,
    dataType: 'json',
    success: function(response) {
      $('#followButtonContainer').html(response.button);
      $(".followBtn").on("click", followClicked);
      // Toggle the button text based on the response
      if (response.status === "followed") {
        // Increment the follower count on the frontend
        var followerCountElement = $('.follower-count');
        followerCountElement.text(parseInt(followerCountElement.text()) + 1);
      } else if (response.status === "unfollowed") {
        // Decrement the follower count on the frontend
        var followerCountElement = $('.follower-count');
        followerCountElement.text(parseInt(followerCountElement.text()) - 1);
      }
    },
    error: function(xhr, status, error) {
      console.log(error);
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="followBtns showFollowDiv">
  <form method="POST" action="">
    <input type="hidden" value="user01" name="username">
    <input type="hidden" value="user02" name="following">
    <input type="hidden" value="2024/03/25 15:00:00" name="date">

    <div id="followButtonContainer">
      <button class="followBtn" type="button" value="follow" name="action">Follow</button>
    </div>
  </form>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.