实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>身份验证-ajax之GET查询+POST修改</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color:#b3b3cc;
}
.login{
width:450px;
margin: 80px auto;
padding: 15px;
text-align: center;
border-radius: 5px;
background-color: #ffffff;
}
.content{
display: none;
}
.login table{
margin: auto;
}
thead tr th p{
margin: 0 auto;
color: #ff4d4d;
font-size: 22px;
padding-bottom: 10px;
margin-bottom: 5px;
border-bottom: 2px dashed #ff4d4d;
}
tbody tr{
padding: 5px 0;
height:40px;
}
tbody hr{
border-bottom:1px dashed #b3b3cc;
}
tbody tr td:nth-child(1){
text-align: right;
width: 100px;
padding-right: 5px;
}
tbody tr td:nth-child(2){
text-align: left;
padding-left: 5px;
}
tbody tr td:nth-child(2) input{
border-radius: 5px;
border: 1px solid #ff4d4d;
width: 185px;
height: 30px;
padding: 0 20px;
}
tfoot button{
color: #ffffff;
font-size: 16px;
margin-top: 10px;
margin-left: 20px;
border-radius: 5px;
border: 1px solid #b3b3cc;
background-color: #4d88ff;
width: 320px;
height: 40px;
}
.Info{
display: none;
}
.show{
display: block;
}
.Info tfoot button{
color: #ffffff;
font-size: 16px;
margin-top: 10px;
margin-left: 20px;
border-radius: 5px;
border: 1px solid #b3b3cc;
background-color: #4d88ff;
width: 150px;
height: 40px;
}{}
</style>
</head>
<body>
<div class="login">
<div class="content show" id="content">
<form action="" method="post" name="login">
<table>
<thead>
<tr>
<th colspan="2">
<p>学员验证</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label for="loginId">学员编号 :</label>
</td>
<td>
<input type="text" id="loginId" name="loginId" min="11" max="11" value="20190721000" placeholder="11位身份识别码">
</td>
</tr>
<tr>
<td>
<label for="userName">学员名称 :</label>
</td>
<td>
<input type="text" id="userName" name="userName" max="8" value="大优" placeholder="仅支持中文姓名，限8个字">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="button" id="submit_1">立 即 登 录</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
<div class="Info" id="Info">
<form name="userInfo" action="">
<table>
<thead>
<tr>
<th colspan="2">
<p>身份信息</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label for="name">姓名 :</label>
</td>
<td>
<input type="text" id="name" name="name" min="6" max="16" disabled>
</td>
</tr>
<tr>
<td>
<label for="age">年龄 :</label>
</td>
<td>
<input type="text" id="age" name="age" disabled>
</td>
</tr>
<tr>
<td>
<label for="sex">性别 :</label>
</td>
<td>
<input type="text" id="sex" name="sxe" disabled>
</td>
</tr>
<tr>
<td>
<label for="work">职业 :</label>
</td>
<td>
<input type="text" id="work" name="work" disabled>
</td>
</tr>
<tr>
<td>
<label for="address">籍贯 :</label>
</td>
<td>
<input type="text" id="address" name="address" disabled>
</td>
</tr>
<tr>
<td>
<label for="birthday">出生日期 :</label>
</td>
<td>
<input type="date" id="birthday" name="birthday" disabled>
</td>
</tr>
<tr>
<td>
<label for="tel">*** :</label>
</td>
<td>
<input type="tel" id="tel" name="tel" placeholder="13000000000" disabled>
</td>
</tr>
<tr>
<td>
<label for="email">Email :</label>
</td>
<td>
<input type="email" id="email" name="email" placeholder="12345@qq.com" disabled>
<input type="hidden" id="userId" name="userId">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="button" id="submit_2">修 改 信 息</button>
<button type="button" id="submit_3">确 认 保 存</button>
</td>
</tr>
</tfoot>
</table></form>
</div>
</div>
<script>
// ************* AJAX应用之GET方式 **********************************
// 【login登录表】 button 元素 定位
var but_login = document.getElementById("submit_1");
//获取 login 表单
var login = document.forms.namedItem('login');
// login 表单按钮事件监听触发
but_login.addEventListener("click",getLogin,false);
//but_login 监听触发的事件 AJAX(GET方式提交) 用途:输入证件号 和对应的姓名 查询出身份信息
function getLogin() {
var id = login.loginId.value;
var name =login.userName.value;
//实例化 Ajax
var xhr = new XMLHttpRequest();
// 存储函数，当readyState属性改变时，就会调用该函数
xhr.onreadystatechange = function () {
//readyState 响应就绪 和Status 响应完成 200 OK 的情况下执行
//监听
if (xhr.readyState == 4 ) {
var res = JSON.parse(xhr.responseText);
var msg = null;
if (res.code == "0") {
alert(res.msg);
msg = res.data;
userInfo.name.setAttribute("value",msg['name']);
userInfo.age.setAttribute("value",msg['age']);
userInfo.sex.setAttribute("value",msg['sex']);
userInfo.work.setAttribute("value",msg['work']);
userInfo.address.setAttribute("value",msg['address']);
userInfo.birthday.setAttribute("value",msg['birthday']);
userInfo.tel.setAttribute("value",msg['tel']);
userInfo.email.setAttribute("value",msg['email']);
userInfo.userId.setAttribute("value",msg['id']);
var content =document.getElementById("content");
var Info =document.getElementById("Info");
content.classList.remove("show");
Info.classList.add("show");
} else {
alert(res.msg);
}
}
};
//设置GET 请求参数
xhr.open("GET","/index/info/user_find.php?id="+id+"&name="+name,true);
//发送请求
xhr.send();
}
// ************ AJAX应用之POST方式 **********************************
//【userInfo信息表】 button 元素 定位
var but_edit = document.getElementById("submit_2");
var but_save = document.getElementById("submit_3");
//获取 userInfo 表单
var userInfo = document.forms.namedItem("userInfo");
// userInfo表单按钮事件监听触发
but_edit.addEventListener("click",edit,false);
but_save.addEventListener("click",modifyInfo,false);
// 激活表单禁用效果
function edit(){
//getElementsByTagName() 方法返回HTMLCollection对象，该对象类似包含HTML元素的一个数组
var inputEdit = document.getElementsByTagName("input");
var i ;
for(i = 2;i<inputEdit.length-1;i++){
inputEdit[i].attributes.removeNamedItem("disabled");
}
}
// but_save 监听触发的事件 AJAX(POST方式提交) 用途: 更新用户数据
function modifyInfo(){
var xhr =new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){
var msg = JSON.parse(xhr.responseText);
if (res.code == "0") {
alert(res.msg);
var content =document.getElementById("content");
var Info =document.getElementById("Info");
content.classList.add("show");
Info.classList.remove("show");
} else {
alert(res.msg);
}
}
};
//设置参数
xhr.open("POST","/index/info/user_edit.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 更新数据
var data ={
name: userInfo.name.value,
age: userInfo.age.value,
sex: userInfo.sex.value,
work: userInfo.work.value,
address: userInfo.address.value,
birthday: userInfo.birthday.value,
tel: userInfo.tel.value,
email: userInfo.email.value,
id: userInfo.userId.value
};
//JS对象转JSON字符串
var json_data = JSON.stringify(data);
//JSON数据发送服务端
xhr.send('data='+json_data);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
