脚本宝典收集整理的这篇文章主要介绍了JAVA程序员笔记（第三阶段：WEB）第4篇——，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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>
以上是脚本宝典为你收集整理的JAVA程序员笔记（第三阶段：WEB）第4篇——全部内容，希望文章能够帮你解决JAVA程序员笔记（第三阶段：WEB）第4篇——所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。