Ajaxdemo

Jaime_0719

于 2022-10-10 22:47:47 发布

阅读量144

点赞数

文章标签： ajax servlet javascript

本文链接：https://blog.csdn.net/Jaime_0719/article/details/127254290

版权

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		function login() {
			//获取用户输入值
			var _uname = uname.value;
			var _upwd = upwd.value;
			//非空验证
			if (!_uname) {
				alert("用户名不能为空"); return;
			}
			if (!_upwd) {
				alert("密码不能为空"); return;
			}
			//1.创建xhr异步对象
			var xhr = new XMLHttpRequest();
			//4.创建监听，接收响应
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var r = xhr.responseText;
					d1.innerHTML = r;
				}
			}
			//2.打开连接，创建请求
			xhr.open("put", "/ajax/post_login", true);
			//3.发送请求
			//3.1创建请求主体，把参数放进去
			//由于默认的请求头规定，只能传普通字符Content-Type: text/plain;，我们的主体中，有=，有&。所以不能传.
			//需要把请求头的Content-Type设置为application/x-www-form-urlencoded
			//xhr.setRequestHeader只能放在open和send之间
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			var formdata = `uname=${_uname}&upwd=${_upwd}`;
			//3.2发送时候，要带着formdata发送
			xhr.send(formdata);
			xhr.onload = function () {
				console.log('哈哈哈')
			}
		}

	</script>
</head>

<body>
	<input type="text" id="uname"><br>
	<input type="text" id="upwd"><br>
	<button onclick="login()">登录</button>
	<div id="d1"></div>
</body>

</html>