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

Question

我想运行相同的 js ajax 函数在多个 id 上，所以我可以 return 来自我的数据库的特定信息。在这里它运行通过 "id="test" 但它 return 将它们全部发送给它。我如何使它们 return 成为它自己的

"id"

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

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

同时匹配你在 success 函数中的匹配将 return 所有可能的匹配 - 在本例中为 3

另外如果在success函数中使用已经创建的ID来匹配元素就好了

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

Answer 2

否则使用$(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 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);
                    }
                 });

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

passing multiple id into one ajax function

html

php

jquery

jquery-ui

laravel