<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
<span>用戶名：</span><input type="text" name="userName" value=""/>
<span>密碼：</span><input type="password" name="pwd" value=""/>
<input type="button" value="登錄" id="btn">
</form>
<script src="/js/jquery-3.6.0.min.js"></script>
<script>
//ajax 撰寫登陸
$(function () {
$("#btn").click(function () {
//點擊提交，發送ajax請求
validate4();
})
})
/*
method：該引數用于指定HTTP的請求方法，一共有get、post、head、put、delete五種方法，常用的方法為get和post，
URL：該引數用于指定HTTP請求的URL地址，可以是絕對URL，也可以是相對URL，
flag：該引數為可選，引數值為布爾型，該引數用于指定是否使用異步方式，true表示異步、false表示同步，默認為true，
name：該引數為可選引數，用于輸入用戶名，如果服務器需要驗證，則必須使用該引數，
password：該引數為可選，用于輸入密碼，若服務器需要驗證，則必須使用該引數，
*/
function validate1() {
var userName = $("input[name=userName]").val();
var pwd = $("input[name=pwd]").val();
//原生js實作ajax
//1、創建XMLHttpRequest物件
xmlHttpRequest = null;
/*
window.XMLHttpRequest
為了防止一些瀏覽器既不支持ActiveX控制元件,
也不支持XMLHttpRequest組件而進行的判斷.
其中XMLHttpRequest也不是window物件的標準屬性,
但可以用來判斷瀏覽器是否支持XMLHttpRequest組件.
如果瀏覽器既不支持ActiveX控制元件,也不支持XMLHttpRequest組件,那么就不會對xmlHttpRequest變數賦值.
*/
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else {
//兼容IE
//ActiveXOject是 IE瀏覽特有的屬性 用于判斷是否是IE瀏覽器
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、連接服務端
//GET:xmlHttpRequest.open("GET",url,true)
xmlHttpRequest.open("GET", "/loginServlet?userName=" + userName + "&pwd=" + pwd, true);
//3、發送請求
// xmlHttpRequest.send();
//post
xmlHttpRequest.open("POST", "/loginServlet", true);
xmlHttpRequest.setRequestHeader("Content_Type",
"application/x-www-from-relencoded");
xmlHttpRequest.send("userName=" + userName + "&pwd=" + pwd);
//4、回呼函式，基于回應的操作
//如果要獲得從服務器端回傳的資料，就必須要先判斷XMLHttpRequest物件的狀態，
// readyState === 0 : 表示未初始化完成，也就是 open 方法還沒有執行
// readyState === 1 : 表示配置資訊已經完成，也就是執行完 open 之后
// readyState === 2 : 表示 send 方法已經執行完成
// readyState === 3 : 表示正在決議回應內容
// readyState === 4 : 表示回應內容已經決議完畢，可以在客戶端使用了
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
// flag=true;
// 獲取后端反饋的結果，字串
var data = xmlHttpRequest.responseText; //"true"
if (data == "true") {
alert("登錄成功");
} else {
alert("登錄失敗");
}
}
}
}
//jquery 實作ajax
function validate2() {
var userName = $("input[name = userName]").val();
var pwd = $("input[name = pwd]").val();
$.post({
"url": "/loginServlet",
//
"date": "userName + " + userName + "&pwd=" + pwd,
"dateType": "text",
"success": function (data) {
if (data == "ture") {
alert("登陸成功");
} else {
alert("登錄失敗");
}
},
"error": function () {
alert("請求失敗");
}
})
}
/*
一般來說我們會碰到的回呼嵌套都不會很多，一把也就一到兩級，
但是在某種情況下，回呼嵌套很多事，代碼就會非常繁瑣，
會給我們的編程帶來很多的麻煩，這種情況俗稱 ——回呼地獄，
回呼地獄，代碼難以維護，常常第一個的函式的輸出就是第二個函式的輸入這種現象
*/
//嵌套 實作ajax
function validate3() {
var userName = $("input[name=userName]").val();
var pwd = $("input[name=pwd]").val();
// $.ajax("url",{}).then(data=>{}).catch(fail=>{})
$.ajax("/loginServlet",
{
"method": "POST",
"data": "userName=" + userName + "&pwd=" + pwd,
"dataType": "text",
}
).then(data => {
if (data == "true") {
alert("登錄成功");
} else {
alert("登錄失敗");
}
}).catch(() => {
alert("請求失敗");
})
}
function validate4() {
var userName = $("input[name=userName]").val();
var pwd = $("input[name=pwd]").val();
// $.ajax("url",{}).then(data=>{}).catch(fail=>{})
$.ajax("/loginServlet",
{
"method": "POST",
"data": {"userName": userName, "pwd": pwd},
"dataType": "json",
}
).then(data => {
if (data.flag == "true") {
alert("登錄成功");
} else {
alert("登錄失敗");
}
}).catch(() => {//抓取錯誤 送去失敗彈窗
alert("請求失敗");
})
}
//Json格式化 ajax
function validate5() {
var userName = $("input[name=userName]").val();
var pwd = $("input[name=pwd]").val();
// $.ajax("url",{}).then(data=>{}).catch(fail=>{})
$.getJSON("/loginServlet", {"userName": userName, "pwd": pwd}
).then(data => {
if (data.flag == "true") {
alert("登錄成功");
} else {
alert("登錄失敗");
}
}).catch(() => {
alert("請求失敗");
})
}
//post請求最終版（登陸方法）
function validate6() {
//拿賬號密碼
let userName = $("input[name=userName]").val();
let password = $("input[name=pwd]").val();
$.ajax("/loginServlet", {
"method": "post",
"data": {"userName": userName, "pwd": password},
"dataType": "json",
}).then(data => {
if (data.flag == "true") {
alert("登錄成功");
} else {
alert("登錄失敗")
}
}).catch(() => {
alert("請求失敗")
})
}
//get請求最終版（登陸方法）
function validate7() {
let userName = $("input[name=userName]").val();
let pwd = $("input[name=pwd]").val();
$.getJSON("/loginServlet", {"userName": userName, "pwd": pwd}
).then(data => {
if (data.flag == "true") {
alert("登錄成功");
} else {
alert("登錄失敗");
}
}).catch(() => {
alert("請求失敗");
})
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/321060.html
標籤：其他
下一篇：程式員的筆記與開發工具推薦