JSON APIs and Ajax

来源:https://www.cnblogs.com/risejl/archive/2022/09/29/16740679.html
-Advertisement-
Play Games

NullPointerException在開發過程中經常遇到,稍有不慎小BUG就出現了,如果避免這個問題呢,Optional就是專門解決這個問題的類,那麼Optional如何使用呢?讓我們一起探索一下吧! ...


JSON APIs and Ajax

onclick

希望代碼僅在頁面完成載入後執行。 將名為DOMContentLoaded的 JavaScript 事件附加到 document 中。 以下是實現的代碼:

document.addEventListener('DOMContentLoaded', function() {

});

DOMContentLoaded函數內部添加事件處理方法。 可以添加onclick事件處理器,當用戶點擊 id 為getMessage的元素時會觸發事件。 添加以下代碼:

document.getElementById('getMessage').onclick = function(){};
<script>
  document.addEventListener('DOMContentLoaded', function(){document.getElementById("getMessage").onclick = function() {}
  });
</script>

單擊事件改變文本 click event

當點擊事件發生時,使用 JavaScript 更新 HTML 元素。

例如,當用戶點擊 Get Message 按鈕時,它將改變 class 為 message 的元素的文本為 Here is the message

通過在點擊事件內添加以下代碼實現:

document.getElementsByClassName('message')[0].textContent="Here is the message";

使用 XMLHttpRequest 方法獲取 JSON

可以從外部來源請求數據。 這就是 API 發揮作用的地方。

API(或叫應用程式編程介面)是電腦用來互相通信的工具。 通過 AJAX 技術從 API 獲得的數據來更新 HTML。

大部分 web APIs 以 JSON 格式傳輸數據。 JSON 是 JavaScript Object Notation 的簡寫。

JSON 語法與 JavaScript 對象字面符號非常相似。 JSON 具有對象屬性以及其當前值,夾在 {}之間。

這些屬性及其值通常稱為 "鍵值對"。

但是,JSON 是由 API 以bytes 形式傳輸的,程式以string接收它。 它們能轉換成為 JavaScript 對象,但預設情況下它們不是 JavaScript 對象。 JSON.parse方法解析字元串並構造它描述的 JavaScript 對象。

從 freeCodeCamp 的 Cat Photo API 請求 JSON。 以下是在點擊事件中添加的代碼:

const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
  const json = JSON.parse(req.responseText);
  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
};

這裡介紹每行代碼的作用。 JavaScript XMLHttpRequest 對象具有許多用於傳輸數據的屬性和方法。 首先,創建一個XMLHttpRequest對象實例,並保存在req變數里 。 然後,open 方法初始化一個請求——這個例子是從 API 請求數據,因此它是一個 GET 請求。 第二個參數 open 是要從中請求數據的 API 的 URL。 第三個參數是一個布爾值, true 使其成為非同步請求。 send 方法發送請求。 最後,onload 事件處理程式解析返回的數據並應用該 JSON.stringify 方法將JavaScript對象轉換為字元串, 然後將此字元串作為消息文本插入

fetch

請求外部數據的另一個方法是使用 JavaScript 的 fetch() 方法。 它的作用和 XMLHttpRequest 一樣,但是它的語法更容易理解。

下麵是使用 GET 請求 /json/cats.json 數據的例子。

fetch('/json/cats.json')
    .then(response => response.json())
    .then(data => {
        document.getElementById('message').innerHTML = JSON.stringify(data);
    })

逐行解釋一下代碼。

第一行是發起請求。 fetch(URL) 向指定的 URL 發起 GET 請求。 這個方法返回一個 Promise。

當 Promise 返回後,如果請求成功,會執行 then 方法,該方法把響應轉換為 JSON 格式。

then 方法返回的也是 Promise,會被下一個 then 方法捕獲。 第二個 then 方法傳入的參數就是最終的 JSON 對象。

接著,使用 document.getElementById() 選擇將要接收數據的元素。 然後插入請求返回的 JSON 對象創建的字元串修改元素的 HTML 代碼

訪問來自 API 的 JSON 數據

回憶一下 JavaScript 中的一些符號:

[ ] -> 方括弧表示數組
{ } -> 大括弧表示對象
" " -> 雙引號表示字元串, 它們還用於表示 JSON 中的鍵名

理解 API 返回數據的結構是必需的,它將影響你如何獲取你所需的值。

[{"id":0,"imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg","altText":"A white cat wearing a green, helmet shaped melon on its head. ","codeNames":["Juggernaut","Mrs. Wallace","Buttercup"]},{"id":1,"imageLink":"https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg","altText":"A white cat with blue eyes, looking very grumpy. ","codeNames":["Oscar","Scrooge","Tyrion"]},{"id":2,"imageLink":"https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg","altText":"A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ","codeNames":["The Doctor","Loki","Joker"]}]

在 JSON 數據中的第一個和最後一個字元是中括弧[ ], 這意味著返回的數據是一個數組。 JSON 數據中的第二個符號是一個大括弧{,這意味著是一個對象。 再仔細看,你會發現有三個獨立的對象。 這個 JSON 數據是一個包含三個對象的數組。在第一個對象中有一個有趣的 "鍵值對" 它是"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]codeNames 是鍵,它的值是一個包含三個字元串的數組。 對象數組以及數組作為鍵可以作為值。

記住如何訪問數組和對象中的數據。 數組使用括弧表示法來訪問項目的特定索引, 對象使用括弧或點表示法來訪問給定屬性的值。 這個例子列印第一張 cat photo 的 altText 屬性——請註意,編輯器中解析的 JSON 數據被保存在名為 json 的變數中:

console.log(json[0].altText);

控制台將顯示字元串 A white cat wearing a green helmet shaped melon on its head.

將 JSON 轉化為 HTML

從 JSON API 獲取了數據,可以在 HTML 中顯示它們。

既然 cat photo 對象都保存在數組裡,使用 forEach 方法來遍歷它們。 當取到每個對象時,可以修改 HTML 元素。

首先,通過 let html = ""; 聲明一個 html 變數。

接著,遍歷 JSON,將用 strong 標簽包裹的鍵名和後面跟著值的 html 元素添加給變數。 當迴圈結束後渲染它。這是執行此操作的代碼:

let html = "";
json.forEach(function(val) {
  const keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});

註意:使用 textContent 方法。 用 innerHTML 網站容易遭受跨站腳本攻擊。

渲染數據源的圖像

JSON 數組中的每個對象都包含一個 imageLink 鍵,其值為貓圖像的 URL。

當遍歷這些對象的時候,使用 imageLink 屬性在 img 元素中顯示此圖像。

這是執行此操作的代碼:

html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";

預先過濾 JSON

鑒於 JSON 數據存儲在數組中,使用 filter 方法過濾掉 id 鍵值為 1 的 cat。

這是執行此操作的代碼:

json = json.filter(function(val) {
  return (val.id !== 1);
});

根據地理位置數據找到用戶的 GPS 坐標

訪問你用戶當前的地理位置。 每個瀏覽器都有內置的導航器。

導航器會獲取用戶當前的經度和緯度。

這是執行此操作的代碼:

if (navigator.geolocation){
  navigator.geolocation.getCurrentPosition(function(position) {
    document.getElementById('data').innerHTML="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
  });
}

使用 XMLHttpRequest 發送數據

此外,可以將數據發送到外部資源,只要該資源支持 AJAX 請求並且知道 URL。JavaScript 的XMLHttpRequest方法也用於將數據發佈到伺服器。 這是一個示例:

const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 201){
    const serverResponse = JSON.parse(xhr.response);
    document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
  }
};
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
xhr.send(body);

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • #背景 什麼是tapable、hook,平時做vue開發時的webpack 配置一直都沒弄懂,你也有這種情況嗎? 還是看源碼,閑來無聊又看一下webpack的源碼,看看能否找到一些寶藏 tapable和webpack沒有特定關係,可以先看下這篇文章,瞭解下這個小型庫 https://webpack. ...
  • JavaScript排序 — sort()方法 ——解決null、undefined、0之間的排序(混亂)問題 一、普通的數組排序 ​ JavaScript中用方法sort()為數組排序。sort()方法有一個可選參數,是用來確定元素順序的函數。如果這個參數被省略,那麼數組中的元素將按照ASCII字 ...
  • ##vue路由守衛用於登錄驗證許可權攔截 ###vue路由守衛 - 全局(router.beforeEach((to, from, next) =>來判斷登錄和路由跳轉狀態) ###主要方法: to:進入到哪個路由去 from:從哪個路由離開 next:路由的控制參數,常用的有next(true)和n ...
  • LRU 是 Least Recently Used 的縮寫,即最近最少使用。作為一種經典的緩存策略,它的基本思想是長期不被使用的數據,在未來被用到的幾率也不大,所以當新的數據進來時我們可以優先把這些數據替換掉。 一、基本要求 固定大小:限制記憶體使用。 快速訪問:緩存插入和查找操作應該很快,最好是 O ...
  • 一、前言 前段時間碰到了一個 Keybinding 相關的問題,於是探究了一番,首先大家可能會有兩個問題:Monaco Editor 是啥?Keybinding 又是啥? Monaco Editor: 微軟開源的一個代碼編輯器,為 VS Code 的編輯器提供支持,Monaco Editor 核心代 ...
  • 語法&關鍵字與保留字 本章篇幅較長故分成幾個小節來講 語法 區分大小寫 這個沒啥好講的,a和A是兩個變數。 標識符 標識符,就是變數、函數、屬性或函數參數的名稱。 標識符的組成規範,如下: 第一個字元必須是一個字母、下劃線( _ )或者美元符號( $ ); 剩下的其他字元可以使字母、下劃線、美元符號 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 第一問:安全類型檢測——typeof和instanceof 區別以及缺陷,以及解決方案 這兩個方法都可以用來判斷變數類型 區別:前者是判斷這個變數是什麼類型,後者是判斷這個變數是不是某種類型,返回的是布爾值 (1)typeof 缺陷: 1 ...
  • 隨著NFC讀寫器在BS架構下的需求越來越多,使用JS語言在web瀏覽器下操作NFC讀寫器就變得尤其重要.但是web瀏覽器不允許其顯示內容直接操作硬體,所以我們必須使用IC卡讀卡器web插件來實現這個功能.作為web前端工程師,我們首先要瞭解在web中實現操作NFC讀寫器的步驟:1、下載友我科技IC卡 ...
一周排行
    -Advertisement-
    Play Games
  • MQTTnet 是一個高性能的MQTT類庫,支持.NET Core和.NET Framework。 MQTTnet 原理: MQTTnet 是一個用於.NET的高性能MQTT類庫,實現了MQTT協議的各個層級,包括連接、會話、發佈/訂閱、QoS(服務質量)等。其原理涉及以下關鍵概念: MqttCli ...
  • 在WPF中,源屬性(Source Property)指的是提供數據的屬性,通常是數據模型或者其他控制項的屬性,而目標屬性(Target Property)則是數據綁定的目標,通常是綁定到控制項的屬性,例如TextBlock的Text屬性。數據綁定將源屬性的值自動更新到目標屬性中。 主要包含以下幾個事件: ...
  • async/await 是 C# 中非同步編程的關鍵特性,它使得非同步代碼編寫更為簡單和直觀。下麵深入詳細描述了 async/await 的使用場景、優點以及一些高級使用方法,並提供了相應的實例源代碼。 使用場景: I/O 操作: 非同步編程特別適用於涉及 I/O 操作(如文件讀寫、網路請求等)的場景。在 ...
  • 使用過office的visio軟體畫圖的小伙伴都知道,畫圖軟體分為兩部分,左側圖形庫,存放各種圖標,右側是一個畫布,將左側圖形庫的圖標控制項拖拽到右側畫布,就會生成一個新的控制項,並且可以自由拖動。那如何在WPF程式中,實現類似的功能呢?今天就以一個簡單的小例子,簡述如何在WPF中實現控制項的拖拽和拖動,... ...
  • 1、Blazor Hybrid簡介 Blazor Hybrid 使開發人員能夠將桌面和移動本機客戶端框架與 .NET 和 Blazor 結合使用。在 Blazor Hybrid 應用中,Razor 組件在設備上是本機運行的。 這些組件通過本地互操作通道呈現到嵌入式 Web 視圖控制項。 組件不在瀏覽器 ...
  • 除了內置的數據集,scikit-learn還提供了隨機樣本的生成器。通過這些生成器函數,可以生成具有特定特性和分佈的隨機數據集,以幫助進行機器學習演算法的研究、測試和比較。 目前,scikit-learn庫(v1.3.0版)中有20個不同的生成樣本的函數。本篇重點介紹其中幾個具有代表性的函數。 1. ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------002實現通過文件對話框,選擇合適的文件夾,自定義預設的圖片保存位置,簡單易學 ...
  • 每次談到容器的時候,除了Docker之外,都會說起 Kubernetes,那麼什麼是 Kubernetes呢?今天就來一起學快速入門一下 Kubernetes 吧!希望本文對您有所幫助。 Kubernetes,一種用於管理和自動化雲中容器化工作負載的工具。 想象一下你有一個管弦樂隊,將每個音樂家視為 ...
  • 目錄 基本說明 安裝 Nginx 部署 VUE 前端 部署 Django 後端 Django admin 靜態文件(CSS,JS等)丟失的問題 總結 1. 基本說明 本文介紹了在 windows 伺服器下,通過 Nginx 部署 VUE + Django 前後端分離項目。本項目前端運行在 80 埠 ...
  • 從0到1,手把手帶你開發截圖工具ScreenCap------003實現最小化程式到托盤運行,- 為了方便截圖乾凈,實現最小化程式到托盤運行,簡潔,勿擾,實現最小化程式到托盤運行, 實現托盤菜單功能,實現回顯主窗體, 實現托盤開始截屏, 實現氣泡信息提示,實現托盤程式提示,實現托盤退出程式, 封裝完... ...