jQuery 與 Ajax

#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

saffran




Related Posts

Vue.js 學習旅程Mile 2 – 環境建置篇

Vue.js 學習旅程Mile 2 – 環境建置篇

 yuhantaiwan
JavaScript 程式執行原理：Scope Chain 與 var, let, const

JavaScript 程式執行原理：Scope Chain 與 var, let, const

 backas36
text CSS

text CSS

 mijouhsieh

Comments