Question

我有查找所有用户帖子的数据库查询。然后，此查询用于创建forEach循环，该循环将为每个数据库结果创建一个帖子：

for($indexPost=0; $indexPost < $postCount; $indexPost++) {

//All information to do with the post

echo<<<_END

<form action="feedLikes.php" id="likePostForm" method="post">

<input type="hidden" name="feedIDForLike" class="feedIDForLike" value="$feedID">

<button type="submit" class="likeButton"></button>

</form>

_END;

}

我已经注释掉了所有的帖子信息，因为它加载时它完全显示出来。我遇到的问题是按下那个按钮时会执行以下ajax：

$(document).ready(function()
{

 $('#likePostForm').on('submit', function (e) {  
    e.preventDefault();
    likePost();
 });

});

function likePost()
{  
var feedIDLike = $(".feedIDForLike").val();



     $.ajax({
      url: "feedLikesClicked.php",
      cache: false,
        type: "POST",
         data: {feedIDLike: feedIDLike},
         dataType: "html",
      success: function(html){
          location.reload();
      }
    });
    }

这种作品。当我按下like功能时，feedLikesClicked.php内的代码就可以完成它的工作。但是，我目前在我的Feed中有5个帖子。当我在帖子上按下时，它会被输入数据库5次。这是因为按下like时的ajax调用是由每个帖子而不是我点击的那个帖子运行的。

我的问题是，当在循环中创建表单时，如何让这个单独的表单运行ajax？

感谢您的帮助，我希望这是有道理的。

我尝试的事情

由于每个表单ID必须是唯一的，我尝试将表单行更改为：

<form action="feedLikes.php" id="likePostForm$feedID" method="post">

然后将jquery的顶行改为：

var feedID = $(".feedIDForLike").val();

$('#likePostForm'+ feedID).on('submit', function (e) {  
    e.preventDefault();
    likePost();
 });

但不幸的是，结果相同

Answer 1

我在表单中设置了一个数据属性，因此每个表单都有自己的集合，并且由于您使用的是onsubmit函数，因此可以将this（表示所选表单）传递给likePost然后，您可以轻松地从传递的元素中提取该data-feedID。代码的问题在于您选择了具有类feedIDForLike的每个元素。

<?
for($indexPost=0; $indexPost < $postCount; $indexPost++) {

    //All information to do with the post
    echo<<<_END
        <form action="feedLikes.php" id="likePostForm" data-feedID="{$feedID}" method="post">
            <button type="submit" class="likeButton"></button>
        </form>
_END;

}

?>

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

        $('#likePostForm').on('submit', function(e) {
            e.preventDefault();
            likePost(this);
        });

    });

    function likePost(elem) {
        var feedIDLike = elem.attr("data-feedID");
        $.ajax({
            url: "feedLikesClicked.php",
            cache: false,
            type: "POST",
            data: {
                feedIDLike: feedIDLike
            },
            dataType: "html",
            success: function(html) {
                location.reload();
            }
        });
    }
</script>

Answer 2

在提交函数中移动你的likePost（）函数，并使用jquery的this和最接近的函数来获取变量。

$(document).ready(function()
{

 $('#likePostForm').on('submit', function (e) {  
    e.preventDefault();

    //try something like this
    var feedIDLike = $(this).closest( ".feedIDForLike" ).val();

    $.ajax({
      url: "feedLikesClicked.php",
      cache: false,
        type: "POST",
         data: {feedIDLike: feedIDLike},
         dataType: "html",
      success: function(html){
          location.reload();
      }
    });
 });

});

使用Ajax提交在forEach循环中的单个表单

2 个答案: