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来拼装请求数据,后来成功了,各位要有其他方式请指点一二。

js api 之 fetch、querySelector、form、atob及btoa的更多相关文章

  1. 新一代AJAX API:FETCH

    AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好.更好用的API是 fe ...

  2. Web报表工具FineReport的JS API开发(二)

    上次介绍FineReport的JS API中的第一类开发--FR,这次就来介绍一下FS和contentWindow类的开发. 1 FS FS是数据决策系统中的js接口,比如说FS.tabPane.ad ...

  3. 在 JS 中使用 fetch 更加高效地进行网络请求

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...

  4. 怎样调通微信支付及微信发货通知接口(Js API)

    怎样调通微信支付及微信发货通知接口(Js API) 微信支付提供了一个支付測试页面,微信支付正式使用须要測通支付.发货通知接口 .告警接口.维权接口.告警接口.维权接口非常easy.支付界面调通也相对 ...

  5. JQuery plugin ---- simplePagination.js API

    CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...

  6. Node.js API 初解读(一)

    Node.JS API 初解读 Version: NodeJs v6.2.0 一. Assert 1.简介 Assert模块主要用于断言.如果表达式不符合预期,就抛出一个错误. 该模块用于编写程序的单 ...

  7. Web报表工具FineReport的JS API开发(一)

    很多报表软件可以利用JS接口来实现更多更复杂的功能.以FineReport为例,开放了大量的JS API给用户,根据执行JS的主体不同可以将分为三大类:FR.FS和contentWindow. 在js ...

  8. 微信支付开发(1) JS API支付

    关键字:微信支付 微信支付v3 jsapi支付 统一支付 Native支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3 ...

  9. js api 实现钉钉免登

    js api 实现钉钉免登,用于从钉钉微应用跳转到企业内部的oa,erp等,我刚刚实施完了我公司的这个功能,钉钉用起来还不错. 1 js api 实现钉钉免登,页面配置. <title>利 ...

随机推荐

  1. Solid-state storage management

    Solid-state storage management for a system, the management including establishing, externally to a ...

  2. 简明Python3教程 10.模块

    简介 现在你已经知道通过定义函数可以在你的程序中复用代码.但当你想在你编写的其他程序中复用大量函数怎么办呢? 也许你可以猜到了,办法就是利用模块. 有各种编写模块的方式,但最简单的方式是创建一个以.p ...

  3. STL algorithm算法lexicographical_compare(30)

    lexicographical_compare原型: std::lexicographical_compare default (1) template <class InputIterator ...

  4. python3给图片添加水印

    #!/usr/local/bin/python3 #coding=gbk import os, io, sys, re, time, json, random from PIL import Imag ...

  5. Fedora15下搭建QT开发环境及编译QT(提前一键安装完,qt编译所有必需库 yum install gcc-c++ libXtst-devel freetype freetype-devel fontconfig-devel libXrender-devel )

    看了不少linux上编译qt的文章,实际上直接通过yum 安装qt是最方便的,请参考<yum安装qt> 不过初步接触fedora,为了了解一下如何在linux上编译.安装开源代码,所以必须 ...

  6. 用C语言编写Windows服务程序的五个步骤

    Windows 服务被设计用于需要在后台运行的应用程序以及实现没有用户交互的任务.为了学习这种控制台应用程序的基础知识,C(不是C++)是最佳选择.本文将建立并实现一个简单的服务程序,其功能是查询系统 ...

  7. LAN公布java web项目的方法的外侧

    1.进入路由器设置页面:http://192.168.1.1 2.找到"转发规则"选项,我现在的路由器tp-link,不同型号tp-link"转发规则"选项位置 ...

  8. QProcess::startDetached(5.10有了一种新的方式)

    From Qt 5.10 on, there is a new way how to start detached processes with QProcess. Of course you kno ...

  9. JS超链接动态显示图片

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  10. delphi的拖拽功能实现

    惭愧,编了这么多年程序,还没用过拖拽功能 这次同事要实现图标互换的功能,让我帮忙看一下,于是趁机研究了一下拖拽事件,发现还是比较简单的 参考了http://topic.csdn.net/u/20081 ...