如何實現 OnClick 事件調用 $.getJSON 函數

Question

我正在使用 Json 數據來填充 Html 表。 當我排除時，代碼工作正常

function getAllDepts()
{

但我想插入一個按鈕，以便它可以使用新的 JSON 數據填充 html 表並刷新表。

但是，我沒有什么對我有用。

有什么建議？？

我的 HTML 代碼是

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="table-responsive"> <h1>Json</h1> <br/> <table class="table table-bordered table-striped" id="employee_table"> <tr> <th>Class</th> <th>Time</th> </tr> </table> </div> </div> <input id="getAllDepts" type="button" value="Create Table From JSON" /> </body> </html> <script> $(document).ready(function(){ var employee_data= ''; if(localStorage.myJSON !== undefined){ var myJSON = JSON.parse(localStorage.myJSON); employee_data += '<tbody>'; $.each(myJSON, function(key, value){ employee_data += '<tr>'; employee_data += '<td>'+value.class+'</td>'; employee_data += '<td>'+value.time+'</td>'; employee_data += '</tr>'; }); employee_data += '</tbody>'; $('#employee_table').append(employee_data); } employee_data= ''; // empty employee_data $('#getAllDepts').click(function() { $.getJSON("https://api.myjson.com/bins/8qktd", function(data){ $("#yourtableid tbody").remove(); // Empty table before filling it with new data localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage $.each(data, function(key, value){ employee_data += '<tr>'; employee_data += '<td>'+value.class+'</td>'; employee_data += '<td>'+value.time+'</td>'; employee_data += '</tr>'; }); $('#employee_table').append(employee_data); }); }) </script>

我面臨的另一個問題是離線時，[（當然，當我從那里刪除函數 getAllDepts() { ），它運行良好]，在那種情況下，它僅在在線和離線時使用 json 數據填充表它不再工作，只顯示列標題。

我的json數據是

 [ { "id":"1", "time":"10-15", "class":"John Smith" }, { "id":"2", "time":"10-15", "class":"John Smith" }, { "id":"3", "time":"10-15", "class":"John Smith" }, { "id":"4", "time":"10-15", "class":"John Smith" }, { "id":"5", "time":"10-15", "class":"John Smith" }, { "id":"6", "time":"10-15", "class":"John Smith" }, { "id":"7", "time":"10-15", "class":"John Smith" }, { "id":"8", "time":"10-15", "class":"John Smith" }, { "id":"9", "time":"10-15", "class":"John Smith" }, { "id":"10", "time":"10-15", "class":"John Smith" }, { "id":"11", "time":"10-15", "class":"John Smith" }, { "id":"12", "time":"10-15", "class":"John Smith" } ]

Answer 1

你可以這樣做：

使用單擊偵聽器包裝您的 getJSON 函數。 這是您重寫的腳本標簽：

<script>
$(document).ready(function() {
  var employee_data= '';

  if(localStorage.myJSON !== undefined){
    var myJSON = JSON.parse(localStorage.myJSON);
    employee_data += '<tbody>';
    $.each(myJSON, function(key, value){
      employee_data += '<tr>';
      employee_data += '<td>'+value.class+'</td>';
      employee_data += '<td>'+value.time+'</td>';

      employee_data += '</tr>';
    });
    employee_data += '</tbody>';
    $('#employee_table').append(employee_data);
  }

  employee_data= '';  // empty employee_data

  $('#getAllDepts').click(function() {
    $.getJSON("https://api.myjson.com/bins/8qktd", function(data){
        $("#yourtableid tbody").remove();    // Empty table before filling it with new data

        localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage
        $.each(data, function(key, value){
          employee_data += '<tr>';
          employee_data += '<td>'+value.class+'</td>';
          employee_data += '<td>'+value.time+'</td>';

          employee_data += '</tr>';
        });
        $('#employee_table').append(employee_data);
    });
  })

});
</script>

只需在 HTML 元素中的 input 元素中添加一個 id，如下所示：

<input id="getAllDepts" type="button" value="Create Table From JSON" />

當您離線時，您的函數不會返回任何數據，因為您正在向托管在 Internet 上的 URL 發出 AJAX 請求。 如果您想離線使用它，請嘗試在本地計算機上創建一個模擬 JSON 文件以供使用。

離線測試的一種簡單方法是使用您想要的任何數據創建您自己的 json 文件。 例如：您可以創建一個名為 test.json 的文件並用您自己的有效 JSON 數據填充它。

只需將您的 ajax 請求更改為指向本地文件，而不是互聯網上的 url。 您可以隨時更換這些。 快速示例：

$.getJSON("data.json", function(data){

不確定您的目錄結構是什么樣的，但您可能不得不弄亂 json 文件的路徑。

如何實現 OnClick 事件調用 $.getJSON 函數

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-14 14:19:54

如何實現 OnClick 事件調用 $.getJSON 函數

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-14 14:19:54

解決方案1
1 已采納 2017-10-14 14:19:54