<style> body,input,button,select,h1{ font-size:20px; line-height:18px; } </style> <script> window.onload=function(){ document.getElementById("search").onclick=function(){//查询数据 //发送Ajax查询请求并处理 var request=new XMLHttpRequest(); //open("方法(GET查询,POST添加)","打开的文件数据",处理方式(同步为false异步为true,不填默认为true)); request.open("GET","server.php?number="+document.getElementById('keyword').value); request.send(); request.onreadystatechange=function(){ if(request.readyState===4){//当服务器请求完成 if(request.status===200){//status==200为服务器请求成功 var data=JSON.parse(request.responseText); if(data.success){//数据填写符合要求 document.getElementById('searchResult').innerHTML=data.msg; }else{//数据填写不符号要求 document.getElementById('searchResult').innerHTML="出现错误:"+data.msg; } }else{//服务器请求失败 alert("发生错误:"+request.status); } } } } document.getElementById("save").onclick=function(){//添加数据 //发送Ajax添加数据请求并处理 var request=new XMLHttpRequest(); //open("方法(GET查询,POST添加)","打开的文件数据",处理方式(同步为false异步为true,不填默认为true))；; request.open("POST","server.php"); //定义data取得用户所填写的数据，并且send(data)到服务器 var data="name="+document.getElementById("staffName").value +"&number="+document.getElementById("staffNumber").value +"&sex="+document.getElementById("staffSex").value +"&job="+document.getElementById("staffJob").value; request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在POST方法里必写，否则添加数据不起作用 request.send(data); request.onreadystatechange=function(){ if(request.readyState===4){//当服务器请求完成 if(request.status===200){//status==200为服务器请求成功 var data=JSON.parse(request.responseText); if(data.success){//数据填写符合要求 document.getElementById('createResult').innerHTML=data.msg; }else{//数据填写不符合要求 document.getElementById('createResult').innerHTML="出现错误:"+data.msg; } }else{//服务器请求失败 alert("发生错误:"+request.status); } } } } } </script> <body> <h1>员工查询</h1> <label>请输入员工编号:</label> <input type="text"/> <button>查询</button> <p></p> <h1>员工创建</h1> <label>请输入员工姓名:</label> <input type="text"/><br> <label>请输入员工编号:</label> <input type="text"/><br> <label>请输入员工性别:</label> <select> <option>男</option> <option>女</option> </select><br> <label>请输入员工职位:</label> <input type="text"/><br> <button>保存</button> <p></p> </body>
