WebStorm教程(3)
阿新 • • 發佈:2019-01-14
介面
我自己理解前後端傳輸資料都是通過ajax方式
一般使用get和post兩種方式傳輸資料
GET
介面
介面描述 | 獲取登入驗證碼圖片及金鑰 |
---|---|
HTTP方法 | POST |
URL | /captcha |
HTTP頭部 | 無 |
HTTP請求BODY | 無 |
HTTP響應訊息內容 |
{ "status": int, "msg": string, "data": { "pic": string, "captchaEncrypt": string } }
程式碼
var u = "http://121.42.161.235:9091"; var o; // 驗證碼 function safecode() { o = $.ajax({ type: 'POST', url: u + "/captcha", async: false, success: function(result) { $('#safecode-img').attr('src', "data:image/jpeg;base64," + result.data.pic); } }); } safecode();
POST
介面
介面描述 | 前臺將使用者名稱、密碼、驗證碼及驗證碼金鑰提交至服務端進行登入驗證,登入成功後會返回token,登入失敗則返回提示資訊 |
---|---|
HTTP方法 | POST |
URL | /login |
HTTP頭部 | 無 |
HTTP請求BODYBODY |
{ "username": string //使用者名稱 "password": string //密碼 "captcha": string //驗證碼 "captchaEncrypt": string //驗證碼金鑰,此欄位為獲取驗證碼時給前端傳遞的引數 }
HTTP響應訊息內容
{
"status": int "msg": string,
"data": {
"token": string // 客戶端token
}
}
程式碼
參考:https://blog.csdn.net/liyongjian12/article/details/54844827
// 登入方法
function submitTest() {
// 校檢
// 觀察值
// let userName = document.getElementById("userName").value;
// let password = document.getElementById("password").value;
// let captcha = document.getElementById("captcha").value;
let userName = "sa";
let password = "111111";
let captcha = "5k83";
// 登入
var logininfo = $.ajax({
type: 'POST',
url: u + "/login",
async: false,
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
"username": userName, //使用者名稱
"password": password, //密碼
"captcha": captcha, //驗證碼
"captchaEncrypt": "0BB5E9A26A099E34F6F076270B519894"
// "captchaEncrypt": o.responseJSON.data.captchaEncrypt //驗證碼金鑰,此欄位為獲取驗證碼時給前端傳遞的引數
}),
success: function(result) {
console.log(result.tocken);
}
});
console.log(logininfo);
}
submitTest();