AJAX四步骤

最新推荐文章于 2022-09-08 17:21:06 发布

ygangying

最新推荐文章于 2022-09-08 17:21:06 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/ygangying/article/details/102839115

版权

AJAX初识

json数据和普通js对象的区别

json没有变量
json数据的结尾没有分号
json数据中的键必须用双引号包住
（json是一个字符串）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX初识</title>
	<script type="text/javascript">
		window.onload = function() {
			var btn = document.getElementById("btn");
			btn.onclick = function() {
				//获取用户的用户名和密码
				var uname = document.getElementById("username").value;
				var pass = document.getElementById("pass").value;
				//使用ajax发送请求需要如下几步
				//1.创建XMLHttpRequest对象   ajax的核心对象
				var xhr = new XMLHttpRequest();
				//2.准备发送    
				xhr.open('get','01check.php?username=' + uname + '&password=' + pass, true);
				//3.执行发送
				xhr.send(null);
				//4.指定回调函数
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4) {
						// 4XX 找不到   2XX成功   5XX  服务器错误
						if(xhr.status = 200) {
							var data = xhr.responseText;
							var info = document.getElementById("info");
							if (data == "1") {
								info.innerHTML = '登录成功'
							} else {
								info.innerHTML = '用户名或密码错误';
							}
						}
					}
				}
			}
		}

	</script>
</head>
<body>
	<form>
		用户名: <input type="text" name="username" id="username">
		<span id="info"></span>
		<br />
		密码: <input type="password" name="pass" id="pass">
		<input type="button" value="登录" id="btn">
	</form>
</body>
</html>

<?php 
	//先拿到数据
	$uname = $_POST['username'];
	$pass = $_POST['password'];

	//死数据
	if($uname == "admin" && $pass = "123") {
		echo "1";
	}else {
		echo "2";
	}


 ?>

ygangying

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX四步骤

AJAX初识json数据和普通js对象的区别json没有变量json数据的结尾没有分号json数据中的键必须用双引号包住（json是一个字符串）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AJAX初识</title...
复制链接

扫一扫