我的 JSON 数据使用 AJAX 加载了两次，它只应该在单击时加载一次

My JSON data is loading in twice using AJAX, it is only supposed to load once on click

本文关键字：加载 单击 一次 AJAX 数据 两次 我的 JSON      更新时间：2023-09-26

我正在使用AJAX和Jquery将json对象加载到我的网页中。它工作得很好，但是在 50-70% 的时间内，它将 json 数据加载到我的页面两次，它将第二组数据附加到我的页面，有没有一种好方法可以确保我的数据只加载一次？

我最初的想法是使 JSON 调用同步而不是异步，但这听起来不对，有没有更好的方法

？ 
  $('#myResource').click(function() {
$.getJSON("data/preachers.json", function(result) {
  $.each(result, function(i, field) {
      $("#preachers").append( function() {
      var preacher = '<div class="box box1">';
      preacher += '<div class="image">';
      preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
      preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
      preacher += '</a>';
      preacher += '</div>'; //class = image
      preacher += '<div class="text">';
      preacher += '<p><h2>' + (field.name) + '</h2>';
      preacher += (field.details) + '</p>';
      preacher += '</div>'; //class=text
      preacher += '</div>'; //class=box
      return preacher;
      });
    });
  });
});

尝试

$('#myResource').unbind('click').click(function(){
})...

单击后尝试禁用按钮

$('#myResource').click(function() {
   $('#myResource').prop('disabled' , true); //<<<<<<<<<<<<<<<< here
   $.getJSON("data/preachers.json", function(result) {
     $.each(result, function(i, field) {
      $("#preachers").append( function() {
      var preacher = '<div class="box box1">';
      preacher += '<div class="image">';
      preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
      preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
      preacher += '</a>';
      preacher += '</div>'; //class = image
      preacher += '<div class="text">';
      preacher += '<p><h2>' + (field.name) + '</h2>';
      preacher += (field.details) + '</p>';
      preacher += '</div>'; //class=text
      preacher += '</div>'; //class=box
      return preacher;
      });
      $('#myResource').prop('disabled' , false); //<<<<<<<<<<<<<<<<<<<<<<<  here
    });
  });
});
在一些

注释的帮助下，答案最终是我需要在函数开头取消绑定单击，并将其解绑：

  $('#myResource').click(function() {
      $( "#myResource").unbind( "click" );
      $.getJSON("data/preachers.json", function(result) {
      $.each(result, function(i, field) {
      console.log('load everything');
      $("#preachers").append( function() {
      var preacher = '<div class="box box1">';
      preacher += '<div class="image">';
      preacher += '<a href=' + '"' + (field.link) + '"' + ' target="_blank">';
      preacher += '<img src= "img/resources/' + (field.image) + '" alt="' + (field.name) + '" class="resource_image">';
      preacher += '</a>';
      preacher += '</div>'; //class = image
      preacher += '<div class="text">';
      preacher += '<p><h2>' + (field.name) + '</h2>';
      preacher += (field.details) + '</p>';
      preacher += '</div>'; //class=text
      preacher += '</div>'; //class=box
      return preacher;
      });
    });
  });
});
相关文章：