js api 之 fetch、querySelector、form、atob及btoa

来源:https://www.cnblogs.com/funnyzpc/archive/2019/07/02/11095862.html
-Advertisement-
Play Games

js api 之 fetch、querySelector、form、atob及btoa 轉載請註明出處: "https://www.cnblogs.com/funnyzpc/p/11095862.html" js api即為JavaScript內置函數，本章就說說幾個比較實用的內置函數，內容大致如下 ...


js api 之 fetch、querySelector、form、atob及btoa

轉載請註明出處: https://www.cnblogs.com/funnyzpc/p/11095862.html

js api即為JavaScript內置函數，本章就說說幾個比較實用的內置函數，內容大致如下：

  • fecth http請求函數
  • querySelector 選擇器
  • form 表單函數
  • atob與btoa Base64函數

Base64之atob與btoa

以前，在前端，我們是引入Base64.js後調用api實現數據的Base64的編碼和解碼的運算，現在新的ES標準為我們提供了Base64
的支持，主要用法如下：

  • 編碼：window.btoa(param);
   輸入> window.btoa("hello");
   輸出> "aGVsbG8="
  • 解碼：window.atob(param)
   輸入：window.atob("aGVsbG8=");
   輸出："hello"

DOM選擇器之 querySelector

DOM選擇器在jQuery中用的十分廣泛，極大地方便了前端開發，現在你有了__querySelector__,不用引入惱人的js及
各種js依賴，一樣便捷開發～

  • ID選擇
    // 獲取DOM中的內容
    document.querySelector("#title").innerText;
    // 將DOM設置為粉紅色背景
    document.querySelector("#title").style.backgroundColor="pink";
    // 獲取DOM的class屬性
    document.querySelector("#title").getAttribute("class");
    // 移除DOM
    document.querySelector("#title").remove();
    // 獲取子DOM
    document.querySelector("#title").childNodes;
    // 給DOM添加click事件(點擊後彈出 "success")
    document.querySelector("#title").onclick = function(){alert("success")};
    // 給DOM添加屬性(添加一個可以為name，value為hello的屬性)
    document.querySelector("#title").setAttribute("name","hello");
  • class選擇
    // 獲取DOM中的內容
    document.querySelector(".title").innerText;
    // 將DOM設置為粉紅色背景
    document.querySelector(".title").style.backgroundColor="pink";
    // 獲取DOM的class屬性
    document.querySelector(".title").getAttribute("class");
    // 移除DOM
    document.querySelector(".title").remove();
    // 獲取子DOM
    document.querySelector(".title").childNodes;
    // 給DOM添加click事件(點擊後彈出 "success")
    document.querySelector(".title").onclick = function(){alert("success")};
  • tag選擇器(DOM名稱)
    // 獲取DOM中的內容
    document.querySelector("h4").innerText;
    // 將DOM設置為粉紅色背景
    document.querySelector("h4").style.backgroundColor="pink";
    // 獲取DOM的class屬性
    document.querySelector("h4").getAttribute("class");
    // 移除DOM
    document.querySelector("h4").remove();
    // 獲取子DOM
    document.querySelector("h4").childNodes;
    // 給DOM添加click事件(點擊後彈出 "success")
    document.querySelector("h4").onclick = function(){alert("success")};
    // 給DOM添加屬性(添加一個可以為name，value為hello的屬性)
    document.querySelector("h4").setAttribute("name","hello");
  • 自定義屬性選擇(多用於表單)
    // 獲取DOM的value值
    document.querySelector("input[name=age]").value;
    // 將DOM設置為粉紅色背景
    document.querySelector("input[name=age]").style.backgroundColor="pink";
    // 獲取DOM的class屬性
    document.querySelector("input[name=age]").getAttribute("class");
    // 移除DOM
    document.querySelector("input[name=age]").remove();
    // 獲取子DOM
    document.querySelector("input[name=age]").childNodes;
    // 給DOM添加click事件(點擊後彈出 "success")
    document.querySelector("input[name=age]").onclick = function(){alert("success")};
    // 給DOM添加屬性(添加一個可以為name，value為hello的屬性)
    document.querySelector("input[name=age]").setAttribute("name","hello");

form表單函數

以前我們是沒有表單函數的時候，如果做表單的提交大多定義一個提交按鈕，用jQuery+click函數實現表單提交，
或者獲取參數後使用ajax提交，對於後者暫且不說，對於前者 ES標準提供了新的函數 form函數，當然這個只是
document的一個屬性而已，需要提醒的是這個函數使用的前提是需要給form標籤定義一個name屬性，這個name屬性
的值即為表單函數的函數名字(也可為屬性),具體用法如下；

比如我們的表單是這樣的：

   // html表單
   <form name="fm" method="post" action="/submit">
       <input type="text" name="age" placeholder="請輸入年齡"/>
   </form>

這個時候我們可以這樣操作表單：

    // 提交表單
    document.fm.submit();
    // 獲取表單的name屬性值
    document.fm.name;
    // 獲取表單的DOM
    document.fm.elements;
    // resetb表單
    document.fm.reset();
    // ...更多操作請在chrome控制台輸入命令

fetch

fetch 為js 新內置的http請求函數，用於替代ajax及原始的XMLHttpRequest，與ajax相似的是它提供了請求頭，非同步或同步方法，同時也提供了GET、PUT、DELETE、OPTION等
請求方式,唯一缺憾的是除了POST(json)方式提交外，其他方式均需要自行組裝參數，這裡僅給出幾個簡單樣例供各位參考。

fetch：GET請求

html:

    <form method="GET" style="margin-left:5%;">
        <label>name:</label><input type="text" name="name"/>
        <label>price:</label><input type="number" name="price"/>
        <label><button type="button" onclick="getAction()">GET提交</button></label>
    </form>

javaScript:

    function getAction() {
            // 組裝請求參數
            var name = document.querySelector("input[name=name]").value;
            var price = document.querySelector("input[name=price]").value;

            fetch("/get?name="+name+"&price="+price, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
                // body: JSON.stringify({"name":name,"price":price})
            })
            .then(response => response.json())
            .then(data =>
                document.getElementById("result").innerText = JSON.stringify(data))
            .catch(error =>
                console.log('error is:', error)
            );
        }

這裡的GET請求(如上)，註意如下：

  • 需手動拼接參數值/get?name=name&price=price
  • 由於GET請求本身是沒有請求體的，所以fetch的請求配置中一定不能有body的配置項
  • 由於GET請求本身是沒有請求體的，所以headers項可以不配置
  • 請求結果在第一個then的時候，數據是一個steam，所以需要轉換成json(調用json()方法)
  • 請求結果在第二個then的時候仍然是一個箭頭函數，這個時候如需要對數據進行處理請調用自定義函數處理
fetch：POST(json)請求

html:

    <form method="GET" style="margin-left:5%;">
        <label>name:</label><input type="text" name="name"/>
        <label>price:</label><input type="number" name="price"/>
        <label><button type="button" onclick="getAction()">GET提交</button></label>
    </form>

javaScript:

    function getAction() {
            // 組裝請求參數
            var name = document.querySelector("input[name=name]").value;
            var price = document.querySelector("input[name=price]").value;
            price = Number(price)
            fetch("/post", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({"name":name,"price":price})
            })
            .then(response => response.json())
            .then(data =>
                document.getElementById("result").innerText = JSON.stringify(data))
            .catch(error =>
                console.log('error is:', error)
            );
       }

這裡需要註意對是：

  • Post請求的請求頭的內容類型必須是application/json,至於application/x-www-form-urlencoded我一直沒測通過，請各位指點
  • 請求體中的數據對象必須使用JSON.stringify() 函數轉換成字元串
fetch：POST(form)請求

html：

       <form method="GET" style="margin-left:5%;" name="fm" action="/form">
            <label>name:</label><input type="text" name="name"/>
            <label>price:</label><input type="number" name="price"/>
        </form>

javaScript:

        function getAction() {
            // 組裝請求參數
            let name = document.querySelector("input[name=name]").value;
            let price = document.querySelector("input[name=price]").value;
            // price = Number(price)
            /*
            let formdata = new FormData();
            formdata.append("name",name);
            formdata.append("price",price);
            */
            let data = new URLSearchParams();
            data.set("name",name);
            data.set("price",price);
            fetch("/form", {
                method: 'POST',
                headers: {
                     "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"
                },
                body: data
            })
            .then( response =>response.json() )
            .then(function (data){
                this.success(data);
            })
            .catch(error =>
                console.log('error is:', error)
            );
        }
        function success(data) {
            document.getElementById("result").innerText = JSON.stringify(data)
            alert(window.atob(data.sign))
        }

可以看到中間改過幾次，實在不理想，後有改成URLSearchParams來拼裝請求數據，後來成功了，各位要有其他方式請指點一二。


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

-Advertisement-
Play Games
更多相關文章
  • 客戶端開屏廣告適配的一點經驗
    版權聲明：本文為xing_star原創文章，轉載請註明出處！ 本文同步自http://javaexception.com/archives/165 客戶端開屏廣告適配的一點經驗 昨天晚上，群里有個小伙伴在問，開屏頁廣告如何適配的問題，ui問應該給切幾種尺寸的圖？這塊算是有點心得，所以特意回答了下。 ...
  • elementUI vue this.$confirm 和el-dialog 彈出框 移動
    elementUI vue this.$confirm 和el-dialog 彈出框 移動 ...
  • vue + axios + formdata 上傳文件帶參數的爬坑之路
    vue + axios + formdata 上傳文件帶參數的爬坑之路 ...
  • Vue學習之webpack調用第三方loader(十五）
    恢復內容開始 一、webpack 預設只能打包處理 JS 類型的文件，無法處理 其他的非 JS 類型的文件； 如果非要處理 非 JS 類型的文件，我們需要手動安裝一些 合適 第三方 loader 載入器； 二、webpack 處理第三方文件類型的過程： 1、發現這個要處理的文件不是JS文件，然後就去 ...
  • 創建圖 figure & figcaption
    如報紙、雜誌、報告等其他媒介上看到過圖。通常，圖是由頁面上的文本引述出。 在HTML5出現之前，沒有專門實現這個目的的元素，因此一些開發人員想出了他們自己的解決辦法（通常會使用不那麼理想的、沒有語義的div元素）。 通過引入figure和figcaption，HTML5改變了這種情況。 圖可以是圖表 ...
  • vue 封裝公用函數
    Vue 函數封裝 ...
  • 劍指前端（前端入門筆記系列）——DOM（屬性節點）
    DOM（屬性節點） 屬性節點沒有過參加家族關係中,其專用選擇器：attributes，返回值為對象的形式，它的鍵是索引值，也就是用對象模擬了一個偽數組，DOM中選擇器返回的都是偽數組（可以使用數組的形式遍歷，操作。但是不能使用數組的方法），下麵是屬性節點的操作 <div class="box" ti ...
  • 狀態碼301 302
    301：永久重定向 302：臨時重定向 相同點：輸入網址A，都會重定向到網址B 不同點： ① 301：舊地址A的資源不可訪問了(永久移除),重定向到網址B，搜索引擎會抓取網址B的內容，同時將網址保存為B網址。 ② 302：舊地址A的資源仍可訪問，這個重定向只是臨時從舊地址A跳轉到B地址，這時搜索引擎 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類