jqueryの中でボタンのクリックがうまくいかない

Question

私はhtmlとjavaスクリプトを初めて使っています。ボタンを作成してURLからJSONを取得し、その結果をドロップダウンリストに追加しようとします。 Nodejsサーバーが起動して実行された後、http://localhost:8080/restapi/test/projectsと入力すると、結果として{example}が返されます。だからここカップルの質問がある

： 1）何らかの理由では、ボタンのクリックはjqueryの 2内部の作業をされていません）$ .getJSONだけjqueryの内部で使用することができ、URLの応答からJSONを取得するために他の方法があります？任意のヒントについて

$(document).ready(function() { 
 
    $(document).on('click', '#button1', function() { 
 
     var selector = document.getElementById('selector'); 
 
     var api = 'http://localhost:8080/restapi/test/projects'; 
 
     $.getJSON(api, function (data) { 
 
      $.each(data, function (index, d) { 
 
       var option = document.createElement('option'); 
 
       option = d; 
 
       selector.add(option); 
 
      }); 
 
     }) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id='first'> 
 
     <h1>project options</h1> 
 
     <button id='button1'>Get Projects</button> 
 
</div> 
 
<div id='second'> 
 
     <h2>all projects</h2> 
 
     Projects: <select id='selector'></select> 
 
</div>

感謝。

Answer 1

{example}は有効なJSONではありません。試してください{"1":"example"}

また、option = d;あなたのオプションを上書きします。試してみてくださいoption.value = d;ここ

はあなたのためのクリーンアップバージョンです：

$(document).ready(function() { 
    $('#button1').click(function() { 
     var selector = document.getElementById('selector'); 
     var api = 'http://localhost:8080/restapi/test/projects'; 
     $.getJSON(api, {"1":"example","2":"other example"},function (data) { 
      $.each(data, function (index, d) { 
       selector.options[selector.options.length] = new Option(d,d); 
      }); 
     }); 
    }); 
}); 

フィドル：https://jsfiddle.net/trex005/65hc1srh/

Answer 2

は、以下のことを試してみてください。

$(document).ready(function() { 
    $('body').on('click', '#button1', function() {//this sintax is used most for dynamically added elements 
     var selector = $('#selector'); 
     var api = 'http://localhost:8080/restapi/test/projects'; 
     $.getJSON(api, function (data) { 
      $.each(data, function (index, d) { 
       var option ='<option>'+d+'</option>'; 
       selector.append(option); 
      }); 
     }) 
    }) 
}) 

Answer 3

クリックボタンは、実際に働いている...多分応答に問題があります。 インスペクタを開いてネットワークログを確認できます。 クロムを使用してインスペクタを開くには、右クリックしてから、 'inspect'または 'inspect element'をクリックします。

これは私がボタンをクリックしたときに何が起こったかです。

2番目の質問では、XMLHttpRequestオブジェクトを使用してAJAXリクエストを行うことができます。

Answer 4

clicked.Allは、クリックする要素やドキュメントがわからない$(document).click()です。ボタンがあるとき、それは応答のみclicked.Forあなたのより良い理解は、私はコードスニペット

$(document).ready(function() { 
 
    $('#button1').on('click',function() { 
 
     var selector = document.getElementById('selector'); 
 
     var api = 'http://localhost:8080/restapi/test/projects'; 
 
     $.getJSON(api, function (data) { 
 
      $.each(data, function (index, d) { 
 
       var option = document.createElement('option'); 
 
       option = d; 
 
       selector.add(option); 
 
      }); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id='first'> 
 
     <h1>project options</h1> 
 
     <button id='button1'>Get Projects</button> 
 
</div> 
 
<div id='second'> 
 
     <h2>all projects</h2> 
 
     Projects: <select id='selector'></select> 
 
</div>

を与えているだろうことを告げるあなたがボタンクリックのため

$('#button1').on('click',function() { 

     }); 

を使用している必要があります

それは動作します。していない場合は、あなたのAPIのURLを確認してください。