摘要：通过对AJAX无刷新表单验证页面的实现，对AJAX异步请求后台数据有了进一步的了解，并尝试着写简单的php代码进行后台交互，对通过AJAX实现json数据的提交和返回有了进一步的认识。代码如下：前端验证页面：<!DOCTYPE html> <html> <head> <meta chars
通过对AJAX无刷新表单验证页面的实现，对AJAX异步请求后台数据有了进一步的了解，并尝试着写简单的php代码进行后台交互，对通过AJAX实现json数据的提交和返回有了进一步的认识。
代码如下：
前端验证页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<h3>用户登录</h3>
<form>
<p>用户名: <input type="text" name="username" id="username"></p>
<p>密码: <input type="password" name="password" id="password"></p>
<p><button type="button" id="btnSub">提交</button></p>
</form>
<script>
let btn = document.getElementById("btnSub");
btn.onclick = function () {
//1.创建xhr对象
let xhr = new XMLHttpRequest();
//2.监听响应状态
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 准备就绪
// 判断响应结果:
if (xhr.status === 200) {
//响应成功
let jsonData=JSON.parse(xhr.responseText);
//根据status判断返回结果。1为成功，0为失败
if(jsonData.status==='1'){
$('p:last').after('<p style="color:red">'+jsonData.Msg+'</p>').next().slideUp(3000);
btn.disabled=true;//成功需要禁用按钮，防止验证成功后继续点击。后续可做跳转页面。
}
else if(jsonData.status==='0'){
$('p:last').after('<p style="color:red">'+jsonData.Msg+'</p>').next().slideUp(3000);
btn.disabled=false;//验证失败需要重新解除按钮禁用
//清空内容，并把焦点停在用户名的输入框中
$('#username').val("");
$('#password').val("");
$('#username').focus();
}
} else {
// 响应失败,并根据响应码判断失败原因
alert('响应失败'+xhr.status);
}
} else {
// 请求等待
}
}
//3.设置请求参数
xhr.open('post','check.php',true);
//4. 设置头信息,将内容类型设置为表单提交方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.发送请求
let data = {
username: document.getElementById('username').value,
password: document.getElementById('password').value
};
let data_json=JSON.stringify(data);
xhr.send('data='+data_json);
}
</script>
</body>
</html>check.php：
<?php
// var_dump($_POST['data']);
$user=json_decode($_POST['data']);
// echo $user->username;
// echo $user->password;
$arr=[];
if($user->username==="111"&&$user->password==="222"){
$arr=['status'=>'1','Msg'=>'登录成功'];
}
else{
$arr=['status'=>'0','Msg'=>'用户名或密码错误'];
}
echo json_encode($arr);
