将多个 id 传递给一个 ajax 函数

Question

我想在多个 id 上运行相同的 js ajax 函数，所以我可以从我的数据库中返回特定信息。在这里它确实运行了“id =“test”，但它会将它们全部返回。我如何让它们返回到它自己的

“身份证”

html

       <div>
           <p  class="postbutton" id="test_1" > </p> \\supposed to return 1, but it returns 3//
           <p  class="postbutton" id="test_2" > </p> \\supposed to return 2, but it returns 3//
           <p  class="postbutton" id="test_3" > </p> \\supposed to return 3, but it returns 3//
       </div>

我的脚本函数

$(".postbutton").each(function () {
                        x = $(this).prop('id').replace(/[^\d.]/g, '') // converting it to a set of ID to be passed to my controller

                            $.ajax({
                                /* the route pointing to the post function */
                                url: '/postajax',
                                type: 'POST',
                                /* send the csrf-token and the input to the controller, Laravel stuff */
                                data: {_token: CSRF_TOKEN, message: x},
                                dataType: 'JSON',
                                /* remind that 'data' is the response of the AjaxController */
                                success: function (data)
                                    {
                                        $(" p[id^='test']").html(data.msg);
                                    }
                                 });
                              });

Answer 1

使用 $(this).html() 否则，对于每个 ajax 调用，$(" p[id^='test']").html(data.msg) 将被调用，即使是最后一个 ajax 调用。所以最后一个电话有 3 作为答案。所以它更新了前两个 ajax 调用。

$(".postbutton").each(function () {
                        var context = this
                        x = $(context).prop('id').replace(/[^\d.]/g, '') // converting it to a set of ID to be passed to my controller

                            $.ajax({
                                /* the route pointing to the post function */
                                url: '/postajax',
                                type: 'POST',
                                /* send the csrf-token and the input to the controller, Laravel stuff */
                                data: {_token: CSRF_TOKEN, message: x},
                                dataType: 'JSON',
                                /* remind that 'data' is the response of the AjaxController */
                                success: function (data)
                                    {
                                        $(context).html(data.msg);
                                    }
                                 });
                              });

Answer 2

由于 ID 是在您的情况下不会更改的属性 - 尝试将 .prop 替换为 .attr() 以获取 ID 的值。

在成功函数中也匹配你将返回所有可能的匹配 - 在本例中为 3

如果你使用已经建立的 ID 来匹配成功函数中的元素，比如

$(`#test_${x}`).html(data.msg);

Answer 3

首先将您的所有 id 存储在数组中。 在你的ajax函数中传递这个数组之后。 像这样：-

           var id_list=[];
            $(".postbutton").each(function () {
                        x = $(this).prop('id').replace(/[^\d.]/g, '') // converting it to a set of ID to be passed to my controller
                        id_list.push(x);
             });
            $.ajax({
                /* the route pointing to the post function */
                url: '/postajax',
                type: 'POST',
                /* send the csrf-token and the input to the controller, Laravel stuff */
                data: {_token: CSRF_TOKEN, message: id_list},
                dataType: 'JSON',
                /* remind that 'data' is the response of the AjaxController */
                success: function (data)
                    {
                        $(" p[id^='test']").html(data.msg);
                    }
                 });