Ajax 範例 1

本範例使用 Jquery 的 ajax 所以請記得載入。

使用 get 取得 https://swapi.dev/api/starships/ 的資料

ajax 得到的 json 轉表格。

換日期才觸發。

使用 $.each() 遍歷每個資料。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://code.jquery.com/jquery-3.5.1.min.js"
      integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
      crossorigin="anonymous"
    ></script>
    <title>Document</title>
  </head>
  <body>
    <table class="mytable" id="list_table_json">
      <thead>
        <input id="myday" type="date" />
        <tr>
          <th>Name</th>
          <th>Manufacturer</th>
        </tr>
      </thead>
    </table>
    <script>
      $(document).ready(function () {
        $('#myday').change(function () {
          var date = $(this).val();
          console.log(date, 'change');
          $.ajax({
            url: 'https://swapi.dev/api/starships/',
            dataType: 'json',
            type: 'get',
            cache: false,
            success: function (data) {
              /*console.log(data);*/
              var event_data = '';
              $.each(data.results, function (index, value) {
                /*console.log(value);*/
                event_data += '<tr>';
                event_data += '<td>' + value.name + '</td>';
                event_data += '<td>' + value.manufacturer + '</td>';
                event_data += '</tr>';
              });
              $('#list_table_json').append(event_data);
            },
            error: function (d) {
              /*console.log("error");*/
              alert('404. Please wait until the File is Loaded.');
            },
          });
        });
      });
    </script>
  </body>
</html>