如何防止jQuery Ajax中的数据循环？

问题描述 投票：1回答：1

这是关于使用Select2插件，Ajax和API分配多个用户。在这种情况下，我有一个包含2个Ajax和不同指向URL的函数。目前，我已经预先选择了存储在数据库中的用户。选择使用模态中的Select2。因此，当Modal打开时会发生什么，第一个Ajax将加载URL /all_user以显示DB中的所有用户。之后，第二个Ajax将加载URL /activity，以获取并加载同一模式中其他字段的信息。这两个URL并行运行。

URL /all_user成功显示所有用户。 URL /activity也成功显示预选用户。但是，当我关闭Modal并重新打开没有刷新页面的相同Modal时，它肯定会加载包含上述2个Ajax的相同函数。

FYI，在/activity中，我已经执行了一个从String转换为Array的功能，因为我是从DB接收到String的，因此需要进行转换，然后才能在Select中显示。

所以问题是这两个数据都将重复2x，当我关闭并重新打开时，它将重复3x。如何防止重复？

下面是Select2中的预选/activity。

enter image description here

下面是成功显示所有用户的/all_user

enter image description here

因此，当Modal关闭并重新打开时，会发生重复。

enter image description here

HTML

<select type="text" class="form-control mySelect" id="editOwner" name="editOwner" multiple="multiple"></select>

SELECT2 INIT

var mySelect = $('.mySelect').select2({
   allowClear: true,
   placeholder: "Search Owner...",
   minimumResultsForSearch: -1,
   width: 600,
});

JS

<span onclick='editOwner(&quot;"+value3.l3_id+"&quot;)'></span>

function editOwner(id){

    activity_id = id;

    $.ajax ({
        url: '/all_user',
        crossDomain: true,
        type: "POST",
        dataType : 'json',
        cache: false,
        processData: true,
        data: 'data',
        success: function(response){
            for (var i = 0; i < response.data.length; i++) { 
                $("#editOwner").append($("<option>", {
                    response: response.data[i].fullname,
                    text: response.data[i].fullname
                }));
            }
        }
    });

    $.ajax({
        url : '/activity',
        crossDomain: true,
        type: "POST",
        dataType : 'json',
        cache: false,
        processData: true,
        data: {task_id: activity_id}},
        success: function(response){
                if (response.status == "Success"){
                    $("#editOwner").val(response.data[0]["task_owner"]).attr("readonly",false);

                    $(response.data).each(function(key,value){
                        var owners = value.task_owner.split(',');
                        $(owners).each(function(k,v){
                            $("#editOwner").append($("<option selected>", {
                                response: v,
                                text: v
                            }));
                        });
                        $("#editOwner").val(owners).trigger("change");
                    });

                }
                else {}
        },
        error: function(e){}
    });

    $('#editOwnerModal').modal('show');    
}
javascript jquery html ajax jquery-select2
1个回答
0
投票

这是因为您正在打电话：

editOwner(id);

具有ID #editOwner的select元素的click事件。

喜欢这个：

  <body>
    <select id="cars" style="display: block">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
      function addCar ()
      {
        $("#cars").append
        (
          $("<option>", { response: "Ford", text: "Ford" })
        );
      }

      $("#cars").on
      (
        "click",
        addCar
      );

    </script>
  </body>

每次打开和关闭ID为#editOwner的select元素时，都会在select元素上附加一个新选项。您可以通过添加以下内容轻松解决此问题：

$("#editOwner").unbind();

喜欢这个：

  <body>
    <select id="cars" style="display: block">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
      function addCar ()
      {
        $("#cars").append
        (
          $("<option>", { response: "Ford", text: "Ford" })
        );

        // Add this to remove the onclick events for #cars so it will only run one time.
        $("#cars").unbind();
      }

      $("#cars").on
      (
        "click",
        addCar
      );
    </script>
  </body>

或者更好的是，您只能通过完全不使用onclick事件调用它来使函数运行一次，如下所示：

  <body>
    <select id="cars" style="display: block">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
      function addCar ()
      {
        $("#cars").append
        (
          $("<option>", { response: "Ford", text: "Ford" })
        );
      }
    </script>

    <script type="text/javascript">
      addCar();
    </script>
  </body>

除非出于某种原因，您确实不需要使用onclick事件来调用ajax，但是如果需要，则应该调用$（“＃editOwner”）。unbind（）;在editOwner（id）的末尾；像这样：

      function editOwner(id){

      activity_id = id;

      $.ajax ({
          url: '/all_user',
          crossDomain: true,
          type: "POST",
          dataType : 'json',
          cache: false,
          processData: true,
          data: 'data',
          success: function(response){
              for (var i = 0; i < response.data.length; i++) { 
                  $("#editOwner").append($("<option>", {
                      response: response.data[i].fullname,
                      text: response.data[i].fullname
                  }));
              }
          }
      });

      $.ajax({
          url : '/activity',
          crossDomain: true,
          type: "POST",
          dataType : 'json',
          cache: false,
          processData: true,
          data: {task_id: activity_id}},
          success: function(response){
                  if (response.status == "Success"){
                      $("#editOwner").val(response.data[0]["task_owner"]).attr("readonly",false);

                      $(response.data).each(function(key,value){
                          var owners = value.task_owner.split(',');
                          $(owners).each(function(k,v){
                              $("#editOwner").append($("<option selected>", {
                                  response: v,
                                  text: v
                              }));
                          });
                          $("#editOwner").val(owners).trigger("change");
                      });

                  }
                  else {}
          },
          error: function(e){}
      });

      $('#editOwnerModal').modal('show');   

      // Try adding this.
      $("#editOwner").unbind();
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.