如何调用ajax为给定的列表锚标记具有相同的类id，但不同的url调用 - How to call ajax for a given list anchor tags with same class id but different url to call

我是AJAX的新手，并开始制作一个AJAX脚本，其中，我有许多具有相同类id的锚标记。但是对每个锚标记调用不同的url。我的函数运行，但是，它调用所有的锚标签，即使我使用点击一个锚标签。但是该任务只针对被单击的锚标记完成。

我的第二个问题是

当任务完成了一个锚标记，我开始运行其他锚标记时，它不会完成任务，直到我再次刷新网页，点击它。但它显示了每个锚标签的成功。连工作都没有完成。希望你能理解我的问题，这是我的ajax代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$('.submitdelete').click(function() {
$.ajax({
    type:'POST', 
    url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=28', 
    success: function(response) {
     alert("You have made it!");
    }
});
});
</script> 
<a href="#" title="Remove Posts" class="submitdelete">Remove Posts</a>
//this is for below one
<script type="text/javascript">
 $('.submitdelete').click(function() {
$.ajax({
    type:'POST', 
    url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=29', 
    success: function(response) {
     alert("You have made it!");
    }
});
});
</script>
<a href="#" title="Remove Posts" class="submitdelete">Remove Posts</a>

如果有人不明白这个问题，请在下面评论以获取更多信息。

问题是我怎么做正确?

首先，类选择器的有趣之处在于它选择所有具有相同类的元素。例子:

<a href="#" class="my-selector">Link 1</a>
<a href="#" class="my-selector">Link 2</a>
$('.my-selector').on('click', function() {
    // Code to run when either Link 1 OR Link 2 are clicked
});

所以，在你的代码中发生的事情是，你已经为一个类选择器注册了两个函数，这导致两个函数都运行，即使你只单击两个链接中的一个。

现在，如果我是正确的，这两个函数之间的唯一区别是post id。那么为什么不把post id作为一个变量并只使用一个函数呢?

首先重写你的html如下:

<a href="#" data-post-id="28" title="Remove Posts" class="submitdelete">Remove Posts</a>
...
<a href="#" data-post-id="29" title="Remove Posts" class="submitdelete">Remove Posts</a>

看到data-post-id属性了吗?我可以在里面放任何东西，但它不会显示，而是链接到DOM元素。所以现在无论何时点击链接，我都可以区分哪个链接被点击了!这里，试试这个:

$('.submitdelete').on('click', function(e) {
    e.preventDefault();
    var postID = $(this).data('postId');
    alert('I''m about to delete the post with id: [' + postID + ']');
});

检查这个小提琴的演示。(点击链接)

所以，我猜你已经知道如何进行;只需使用这个小代码片段并将postID变量插入到(单个!)ajax函数中。为了方便，您可以使用$.post()函数:

var deleteUrl = 'http://localhost/w/wp-admin/admin.php';
$('.submitdelete').click(function(e) {
    e.preventDefault();
    $.post( deleteUrl,
        {
            page: 'rssap-feeds',
            action: 'removePosts',
            post: $(this).data('postId')
        },
        function(response) {
            alert("You have made it!");
        }
    );
});

您可以继续，通过在javascript中创建函数并在锚标记中使用它，我使用giorgio方法，您必须使用属性data-post-id。这是我的代码

                <script type="text/javascript">         
function callbb(postID){
$.ajax({
type:'POST', 
url: 'http://localhost/w/wp-admin/admin.php?page=rssap-feeds&action=removePosts&post=' + postID + '', 
success: function(response) {
 alert('you made it ' + postID + '');
}
});
}
</script>

你的锚标签看起来像这样，

 <a href="#" data-post-id="29" onclick="var postID = $(this).data('postId'); callbb(postID)" title="Remove Posts" class="submitdelete">Remove Posts</a>

希望它能帮助你。或者其他人