2017-09-14 14 views
1

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> 
+0

「JSONオブジェクトを1回だけ生成する」とはどういう意味ですか? – Scimonster

+0

'jQueryの$ .getJSON on w3schools.com'についてもっと学んでいます。しないでください。 W3Schoolsはしばしば時代遅れであり、時には間違っていることもあります。 jQueryのためのより良いガイドは、公式のドキュメントhttp://api.jquery.comとhttp://learn.jquery.comよりもありません。私は強くそれらを代わりに使用することをお勧めします。 –

答えて

5

代わりのclickあなたは.one()メソッドは、指定した要素とイベントタイプのハンドラであることを除いて、()を.onと同じですone

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

と結合することができますその最初の呼び出しの後に結合していないあなたはone方法についての詳細情報を見つけることができ

here

+0

あなたはそれほどたくさんのeltonkamamiよりも良い方法でしたが、あなたの方法は元の構造に近いので、完璧に感謝しています。 –

1

ここでは、pointer-events:none;

$(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' 
 
    }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button>Get JSON data</button> 
 

 
<div></div>

プロパティを使用して、変数

$(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 + " "); 
 
      }); 
 
     }); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<button>Get JSON data</button> 
 

 
<div></div>

もう一つの解決策を使用して1つの以上溶液で行きます

これがあなたを助けてくれることを願っています。

1
<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> 

成功すると、このスクリプトは1回動作します。または、このボタンを非表示にするか無効にすることができます。

関連する問題