按鈕點擊不工作jquery

我是新來的HTML和Java腳本。我嘗試創建一個按鈕並從URL獲取JSON，並將結果添加到下拉列表中。 Nodejs服務器啓動並運行後，如果輸入http://localhost:8080/restapi/test/projects，則會返回{example}作爲結果。按鈕點擊不工作jquery

所以這裏還有幾個問題： 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>

感謝您的任何提示。

來源

2016-04-22 Cao Felix

您可以使用Ajax也爲獲得來自URL – Learner

你肯定不會需要JSON響應使用jQuery（或任何其他庫）在JS中執行任何操作，包括髮出Web請求。然而，你會發現圖書館使許多事情變得更簡單，因爲工作已經爲你完成了，沒有理由重新發明輪子。如果您想在沒有jQuery的情況下發出AJAX請求，請查看內置的['XMLHttpRequest']（http://www.w3schools.com/xml/dom_httprequest.asp）對象。這是jQuery使用簡單的東西:) –

按鈕點擊正在工作，yu可以通過在該點擊功能中放置警報或控制檯來檢查它。 – Learner

{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/

來源

2016-04-22 04:51:10 trex005

嗨特雷克斯，謝謝你的回答。我只是將您的代碼放入我的NetBeans IDE8.1 HTML5項目中，但單擊按鈕後的結果未添加到下拉列表中。你有什麼主意嗎？我在谷歌瀏覽器上進行了調試，並且也嘗試了IE瀏覽器。你在小提琴中的例子正是我想要達到的。你知道爲什麼它需要在java腳本中的類型是onLoad，我應該如何實現？當我生成一個新項目時，我使用NetBeans提供的jquery。萬分感謝。 –

聖...我在Eclipse中使用它，但不能在NetBeans中使用。感謝trex，你的代碼完全像我想要的那樣工作。 –

嘗試以下操作：

$(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); 
      }); 
     }) 
    }) 
})

來源

2016-04-22 04:38:09 madalinivascu

點擊按鈕實際上是工作......也許有與響應的問題。您可以通過打開檢查器來檢查網絡日誌。打開檢查員在鉻使用右鍵單擊，然後「檢查」或「檢查元素」。

這是當我按一下按鈕發生了什麼事。

對於第二個問題，您可以使用XMLHttpRequest對象發出AJAX請求。

來源

2016-04-22 04:39:13 Tal87

它不會工作，因爲你沒有做確切的事情clicked.All你所做的是，$(document).click()不知道要點擊的元素或文檔。

你應該使用

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

     });

的按鈕點擊它告訴它會響應僅當按鈕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>

它會工作。如果不是，那麼請檢查您的API網址。

來源

2016-04-22 04:45:18

按鈕點擊不工作jquery

回答

相關問題