jQuery 與 Ajax


Posted by saffran on 2021-02-25

jQuery 是一個 JavaScript library,有非常好的跨瀏覽器兼容性

jQuery 語法查詢庫

You might not need jQuery

引入 jQuery

在 jQuery 官網的 Download 裡面,如果想用「沒壓縮過」的版本,就選擇 Download the uncompressed, development jQuery 這個,複製網址後,把網址貼到 index.html 的 <script src=""> 裡面:

<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.js"></script>
  <title>Document</title>
</head>

如果有成功引入 jQuery,就會建立一個 global 的變數叫做 jQuery
因此在 JS 寫上 console.log(jQuery);,如果有印出東西,就代表有成功引入 jQuery 了

如何用 jQuery 來操作 DOM

.text() 可以更改元素裡面的文字

.show().hide() 來顯示/隱藏元素

範例:
點一下按鈕就顯示 .box,再點一下就隱藏 .box

$('.btn') 也可以寫成 jQuery('.btn'),因為 $ === jQuery$ 只是一個變數的符號而已

$(document).ready(function() {
  var isHide = false;
  $('.btn').click(function (e) {
    if (isHide) {
      $('.box').show();
    } else {
      $('.box').hide();
    }
    isHide = !isHide;
  })
})

.fadeIn().fadeOut() 來顯示/隱藏元素

() 裡面可以傳入毫秒數,例如 .fadeIn(2000)

.val() 可以設定/取得元素的值

如果 .val() 裡面有傳參數,就是 SET(設定值)

例如:用 $('.todo-input').val('smile') 就可以把 .todo-input 的值設為 smile

例如:用 $('.todo-input').val('') 就可以把 .todo-input 的值給清空

如果 .val() 裡面沒有傳參數,就是 GET(取得值)

例如:用 $('.todo-input').val() 就可以取得 .todo-input 的值

.append() 可以依序往後插入元素

範例:

$(document).ready(function() {
  $('.btn').click(function (e) {
    const value = $('.todo-input').val(); // 取出 .todo-input 的值
    $('.todo-input').val(''); // 清空 .todo-input 的值
    $('.todos').append(`<div class="todo">${value}</div>`);
  })
})

.prepend() 可以依序往前插入元素

.css('color', 'red') 可以調整元素的 css,把 color 設為 red

.empty() 可以清空元素裡面的所有東西

.empty() 就等於是 .innerHTML = '',元素本身還是會留著

但如果是用 .remove() 的話,連元素本身也都會被移除掉

事件代理

範例:
.todos 加上 event listener,監聽 .todos 裡面的 .btn-delete,只要 .btn-delete 有 click 事件,就會執行後面 function 的程式碼 $(e.target).parent().fadeOut();

  // 刪除功能
  $('.todos').on('click', '.btn-delete', function(e) {
    $(e.target).parent().fadeOut();
  })

範例:todo list 程式碼

html:

  <input type="text" class="todo-input">
  <button class="btn">Add todo</button>
  <button class="btn-remove-all">Remove all todos</button>
  <div class="todos">

  </div>

all.js:

$(document).ready(function() {
  $('.btn').click(function (e) {
    const value = $('.todo-input').val(); // 取出 .todo-input 的值
    $('.todo-input').val(''); // 清空 .todo-input 的值
    $('.todos').append(`
    <div class="todo">
      ${value}
      <button class="btn-mark">標記完成</button>
      <button class="btn-delete">刪除</button>
    </div>
    `);
  })

  // 移除所有的 todo
  $('.btn-remove-all').click(() => {
    $('.todos').empty();
  })

  // 刪除功能
  $('.todos').on('click', '.btn-delete', function(e) {
    $(e.target).parent().fadeOut();
  })

  // 標記完成/未完成
  $('.todos').on('click', '.btn-mark', function(e) {
    const todo = $(e.target).parent();
    if (todo.hasClass('completed')) { // 變成未完成
      todo.css('color', 'black');
      todo.removeClass('completed');
      $(e.target).text('標記完成');
    } else { // 變成已完成
      todo.css('color', 'green');
      todo.addClass('completed');
      $(e.target).text('標記未完成');     
    }
  })
})

jQuery 與 Ajax

jQuery 與 Ajax 的官方文件,可參考 Low-Level Interface

在接下來的範例中,會使用 REST COUNTRIES 這個 api

$.ajax() 就是一個 function,小括弧裡面要傳入幾個參數,參數可以有幾種形式:

  1. 傳入物件:
    在物件裡面可以寫上各個細節,例如 method, url, data(我想要帶給 server 的資訊)

發送一個 POST 的 request

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

發送一個 GET 的 request

首先,先呼叫 $.ajax() 這個 function 來發送 request

下面這段程式碼,就可以發送一個 GET 的 request 到 https://restcountries.eu/rest/v2/name/germany 這個 api 去

$.ajax({
  method: 'GET',
  url: 'https://restcountries.eu/rest/v2/name/germany'
})

再用 .done() 來拿到 response

發送完 request 之後,要接收 response:
.done() 來接收結果,小括號裡面傳入一個 callback function,把拿到的 data 印出來

$.ajax({
  method: 'GET',
  url: 'https://restcountries.eu/rest/v2/name/germany'
}).done(function(data) {
  console.log(data);
})

做錯誤處理

.fail() 可以接收錯誤訊息

$.ajax({
  method: 'GET',
  url: 'https://aaarestcountries.eu/rest/v2/name/germany'
}).done(function(data) {
  console.log(data);
}).fail(function(err) {
  console.log('error: ', err);
})

另一種寫法:

You Might Not Need jQuery 有提供另一種寫法:
同樣也可以拿到結果和錯誤處理

$.ajax({
  method: 'GET',
  url: 'https://aaarestcountries.eu/rest/v2/name/germany',
  success: data => console.log(data),
  error: err => console.log('error: ', err)
})

完整範例:用 jQuery 送出 request,拿到結果後再顯示在頁面上

按下送出後去 api 拿資料,再把拿到的資料顯示在下方
html:

  Name: <input type="text" name="country-name">
  <button class="btn">送出</button>
  <div class="list">

  </div>

all.js:

$(document).ready(() => {
  $('.btn').click(() => {
    const value = $('input[name=country-name]').val();
    // 如果欄位沒有填寫
    if (value === '') {
      alert('必須輸入名稱!');
      return;
    }

    $('.list').empty(); // 先把 .list 清空

    // 如果欄位有填寫
    $.ajax({
      method: 'GET',
      url: 'https://restcountries.eu/rest/v2/name/' + value,
      success: countries => {
        for (let country of countries) {
          $('.list').append(`<div>${country.alpha2Code} ${country.name} ${country.nativeName}</div>`)
        }
      },
      error: err => {
        alert('系統不穩定!');
      }
    })
  })
})

#jquery #ajax







Related Posts

Day 9 - Dictionary

Day 9 - Dictionary

資料格式的選擇:XML & JSON

資料格式的選擇:XML & JSON

AWS Solutions Architect - Associate (SAA) 學習計畫與備考心得: Module 6

AWS Solutions Architect - Associate (SAA) 學習計畫與備考心得: Module 6


Comments