<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
*{
font-size:30px;
line-height:30px;
}
</style>
</head>
<body>
<div>
<h1>员工查询</h1>
<label>请输入员工编号：</label>
<input type="text" id="keyword"/>
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工创建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName"/>
<br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber"/>
<br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>男</option>
<option>女</option>
</select>
<br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob"/>
<button id="save">保存</button>
<p id="createResult"></p>
</div>
<script>
document.getElementById('search').onclick=function(){
//发送ajax查询请求并处理
var request=new XMLHttpRequest();
request.open('GET','service.php?number='+document.getElementById('keyword').value);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById('searchResult').innerHTML=request.responseText;
}else{
alert('发生错误'+request.status);
}
}
}
};
document.getElementById('save').onclick=function(){
//发送ajax保存请求并处理
var request=new XMLHttpRequest();
request.open('POST','service.php');
var data='name='+document.getElementById('staffName').value+'&number='+document.getElementById('staffNumber').value+'&sex='+document.getElementById('staffSex').value+'&job='+document.getElementById('staffJob').value;
//必须setRequestHeader，如果不写，则表单填全了还会提示'参数错误，员工信息填写不全'
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.send(data);
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById('createResult').innerHTML=request.responseText;
}else{
alert('发生错误'+request.status);
}
}
}
};
</script>
</body>
</html>
