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

【问题标题】：using Ajax to submit an individual form that is within a forEach loop使用 Ajax 提交在 forEach 循环中的单个表单
【发布时间】：2017-07-13 15:32:42
【问题描述】：

我有查找所有用户帖子的数据库查询。然后使用此查询创建一个 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 中的代码就完成了它的工作。但是，我的提要上目前有 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();
 });

但不幸的是，结果相同

【问题讨论】：

您的尝试步入正轨。我建议在表单上创建一个数据参数，data-feedID="{$feedID}" 也是如此 - 然后您可以在表单对象上使用 jquery 而不是单独的元素来获取 ID。您的问题可能是 .feedIDForLike 包含多个 ID，因为页面上可能有多个 ID。

标签： php jquery ajax forms

【解决方案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>

【讨论】：

【解决方案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();
      }
    });
 });

});

【讨论】：