Question

我正在w3schools.com上学习更多关于jQuery的$.getJSON。那么如何让这段代码只生成一次JSON对象呢？

无论按下按钮多少次。这是我正在谈论的代码附加到代码编辑器的代码。这是link和代码。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("demo_ajax_json.js", function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

Answer 1

而不是click，您可以与one

绑定

$(document).ready(function(){
    $("button").one("click", function(){
        $.getJSON("demo_ajax_json.js", function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});

.one（）方法与.on（）相同，除了给定元素和事件类型的处理程序在第一次调用后未绑定

您可以找到有关one方法here

的更多信息

Answer 2

在这里，您将使用变量

再使用一个解决方案

＆＃13;

$(document).ready(function(){
  var clickedOnce = false;
  $("button").click(function(){
    if(!clickedOnce){
      clickedOnce = true;
      $.getJSON("demo_ajax_json.js", function(result){
          $.each(result, function(i, field){
              $("div").append(field + " ");
          });
      });
    }  
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Get JSON data</button>

<div></div>

＆＃13;

使用CSS属性pointer-events:none;

的另一个解决方案

＆＃13;

$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("demo_ajax_json.js", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    }); 
    $(this).css({
      'pointer-events': 'none'
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Get JSON data</button>

<div></div>

＆＃13;

希望这会对你有所帮助。

Answer 3

<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.getJSON("demo_ajax_json.js", function(result){
                $.each(result, function(i, field){
                    $("div").append(field + " ");
                };
                return false;
            );
      });
   });
});
</script>

成功返回false时，此脚本将运行一次。或者您可以隐藏或禁用此按钮。

每次单击按钮时，如何防止$ .getJSON倍增？

3 个答案: