一、用Ajax完成GET请求
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
</head>
<body>
<div>
<form action="lession.php" method="get" style="align-content: center;">
<p>账号：<input type="text" id="user"></p>
<p>密码：<input type="password" id="password"></p>
<button type="submit" id="submit">提交</button>
<p id="tips"></p>
</form>
</div>
</body>
<script type="text/javascript">
var submit = document.getElementById('submit');
submit.onclick = function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
var json = JSON.parse(xhr.responseText);
var tips = document.getElementById('tips');
tips.innerHTML = '欢迎'+json.user+'再次回来';
}
}
var user = document.getElementById('user').value;
var password = document.getElementById('password').value;
var url = 'login_do.php?user='+user+'&password='+password;
xhr.open('get',url,true);
xhr.send(null);
return false;
}
</script>
</html>
login_do.php
<?php
echo json_encode($_GET);
?>