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

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來拼裝請求數據，後來成功了，各位要有其餘方式請指點一二。

原文出處：https://www.cnblogs.com/funnyzpc/p/11095862.html