![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：大多数时候,用jq主要是看中了它简洁的dom操作, 还有就是简化 的ajax, 让小白也能轻松上手
Collection
Collection
总结：
1、JQ选择器极快的提高了HTML页面DOM定位和元素属性获取。本例中用到根据元素属性筛选的选择，用于选择被禁用的input框，$("input[disabled]")
2、常见的元素属性，多以成对出现，如 name=“feng”，如要对属性的删除或设置可以用 ,attr("name","long")来完成，对元素属性中存在独立非成对的属性，如禁用属性 disabled属性，可以使用。.removeAttr("disabled") 或.attr("disabled",false)
3、使用$.post方式进行数据传输时，前端和服务端均不需对数据进行json转换压缩，服务端可直接用$_POST["name"] 获得数据。
4、本案例其它功能于07-17作业功能一致，只是将所有js替换成JQ，数据传输替换为$.ajax( )中的GET类型 和子方式$.post()完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ身份验证-ajax异步$.ajax</title>
<script src="lib/js/jquery-3.4.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color:#E9EAED;
}
.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 #b3b3cc;
}
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 #b3b3cc;
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="20190718001" 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="but_find">立 即 登 录</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
<div class="Info" id="Info">
<form name="userInfo" id="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="13845679988" disabled>
</td>
</tr>
<tr>
<td>
<label for="email">Email :</label>
</td>
<td>
<input type="email" id="email" name="email" placeholder="973245277@qq.com" disabled>
<input type="hidden" id="id" name="id">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button type="button" id="but_edit">修 改 信 息</button>
<button type="button" id="but_save">确 认 保 存</button>
</td>
</tr>
</tfoot>
</table></form>
</div>
</div>
<script>
// ************* $.ajax 应用之 GET提交方式 **********************************
// 按钮触发查询信息事件
$("#but_find").click(function(){
$.ajax({
// 请求类型
type:"GET",
// 请求的服务器处理程序: url
url:"/index/info/user_find.php",
// 成功回调
success: editFind,
// 服务器返回的数据类型
dataType: "json",
// 发送到服务器的数据,默认转为请求字符串/键值对
data: "id=" + $('#loginId').val()+"&name="+$('#userName').val()
});
});
//成功回调喊出
function editFind(res){
var msg =null;
if(res.code == "0" ){
msg = res.data;
$("#name").val(msg.name);
$("#age").val(msg.age);
$("#sex").val(msg.sex);
$("#work").val(msg.work);
$("#address").val(msg.address);
$("#birthday").val(msg.birthday);
$("#tel").val(msg.tel);
$("#email").val(msg.email);
$("#id").val(msg.id);
$("#content").removeClass("show");
$("#Info").addClass("show");
alert(res.msg);
}else{
alert(res.msg);
}
}
// ************ JQ应用AJAX之 $.post提交方式 **********************************
// but_edit 按钮激活表单禁用效果
$("#but_edit").click(function(){
$("input[disabled]").attr("disabled",false);
});
// but_save 更新表单
$("#but_save").click(function(){
$.post(
"/index/info/user_edit2.php",
{
name: $("#name").val(),
age: $("#age").val(),
sex: $("#sex").val(),
work: $("#work").val(),
address: $("#address").val(),
birthday: $("#birthday").val(),
tel: $("#tel").val(),
email: $("#email").val(),
id: $("#id").val()
},
function(msg){
// alert("你好");
if(msg.code=="0") {
alert(msg.msg)
$("#Info").removeClass("show");
$("#content").addClass("show");
}else{
alert($res.msg)
}
},
"json"
)
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
