全方位瞭解JavaScript實現專案對接簡訊驗證碼，Fetch、jQuery、XHR太實用了

簡訊驗證碼註冊登入就是驗證使用者提交的手機驗證碼，如果驗證碼驗證錯誤，就提示“驗證碼錯誤”，如果驗證正確，那就進入到註冊成功的頁面。

這幾天一直在研究JavaScript實現簡訊驗證碼註冊登入的方法，主要是因為專案需求（現在好像幾乎所有的專案都需要驗證碼註冊登入），整理了三種對接方法，可供大家學習和參考：

Fetch方法

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");

var urlencoded = new URLSearchParams();
urlencoded.append("appId", "41KYR0EB****");
urlencoded.append("appKey", "IIWCKKSR7NOQ****");
urlencoded.append("phone", "1561894****");
urlencoded.append("templateId", "1043");
urlencoded.append("variables", "1234");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: urlencoded,
  redirect: 'follow'
};

fetch("https://vip.veesing.com/smsApi/verifyCode", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

jQuery方法

var settings = {
  "url": "https://vip.veesing.com/smsApi/verifyCode",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
  },
  "data": {
    "appId": "41KYR0EB****",
    "appKey": "IIWCKKSR7NOQ****",
    "phone": "1561894****",
    "templateId": "1043",
    "variables": "1234"
  }
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

XHR方法

var data = "appId=41KYR0EB****&appKey=IIWCKKSR7NOQ****&phone=1561894****&templateId=1043&variables=1234";

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "https://vip.veesing.com/smsApi/verifyCode");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");

xhr.send(data);

以上就是JavaScript實現簡訊驗證碼登入註冊的3種方法，有疑問可以在評論區指出，歡迎和大家一起討論。

JavaScript - Fetch.js、JavaScript - jQuery、JavaScript - XHR.js檔案下載