Ajax 多按钮点击答案

【问题标题】：Ajax multiple button clickAjax 多按钮点击
【发布时间】：2023-03-14 10:25:01
【问题描述】：

我有这个网站，可以向用户显示我可以关注或不关注的用户。它在没有 ajax 的情况下工作，但每次单击按钮时都会重新加载。

我添加了 ajax，但它只将首先显示的用户的第一个 following_id 存储到数据库中，仅此而已。它根本不对。拥有一长串用户，并且只有一个用户被插入到数据库中。

但是，如果我点击大约 2 个或更多用户来关注它，它会插入 2 行或更多行 1 个以下 ID，而不是 2 行或更多行不同的 follow_id 被点击。

提前致谢。

我的 ajax 脚本

   $(document).ready(function() {
        $(".followUser").click(function(e) {
            e.preventDefault();
            var form = $('#userAction').serialize();
            var action = 'instant_follow.php';
     
            $.post(action, form, function(data){
              //result goes here...
            });
        });

        $('button#followResult').live('click', function(e){
            e.preventDefault();
            $button = $(this);
            if($button.hasClass('unfollow')){          
              $button.removeClass('unfollow');
              $button.text('follow');
              $button.addClass('follow');
            } else {
              $button.addClass('unfollow');
              $button.text('unfollow');
            }
        });
    });

我的 php 选择表单与我的 ajax 脚本相同的页面

$user = "1";
$stmt = $mysqli->prepare("SELECT * FROM site_users AS s LEFT JOIN site_follows AS f ON (f.following_id = s.user_id AND f.follower_id = ?) WHERE s.user_id != ? AND f.follow_id IS NULL ORDER BY RAND() LIMIT 7");
    $stmt->bind_param("ii", $user, $user);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            echo '
                <form id="userAction" action="" method="post">
                    <p>'.$row["username"].'</p>
                    <button class="followUser" id="followResult">follow</button>
                    <input type="hidden" name="following_id" value="'.$row["user_id"].'">
                </form>
            ';
        }
    } else {
        echo "no user found...";
    }

我在不同页面上的 php 插入查询

//user id which is 1
$user = "1";
$following_id = $_POST["following_id"];
$stmt = $mysqli->prepare("INSERT INTO site_follows (following_id, follower_id) VALUES (?, ?)");
    $stmt->bind_param("ii", $following_id, $user);
    $stmt->execute();
    $stmt->close();

【问题讨论】：

你真正想要什么？？

标签： php ajax mysqli

【解决方案1】：

这个问题仅仅是因为你给你的所有表单都提供了相同的 id，所以无论你点击哪个按钮，只有第一个表单将被提交。而不是使用 $(this).closest("form").serialize() 获取提交按钮的值，所以这只会得到按钮所在的表单点击。

演示代码：

$(document).ready(function() {
  $(document).on("click", ".followUser", function(e) {
    e.preventDefault();
    $button = $(this);
    var form = $(this).closest("form").serialize();//get closest form where button is 
    console.log(form)
    var action = 'instant_follow.php';
    //your ajax
    if ($button.hasClass('unfollow')) {
      $button.addClass('follow').removeClass('unfollow');
      $button.text('follow');
    } else {
      $button.addClass('unfollow').removeClass('follow');
      $button.text('unfollow');
    }
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  <p>Abc</p>
  <button class="followUser" id="followResult">follow</button>
  <input type="hidden" name="following_id" value="1">
</form>
<form action="" method="post">
  <p>Xyz</p>
  <button class="followUser" id="followResult">follow</button>
  <input type="hidden" name="following_id" value="2">
</form>

【讨论】：