<!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>
2017-04-13
<!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(); ????????/* ????????/*//如果是課程提供的源碼，而且報出的是404， ????????/*//那么應該是你這個請求文件寫錯了server.php寫成了service.php。 ????????/*// ????????request.open('GET','server.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(); ???????? ???????? ????????/* ????????/*//如果是課程提供的源碼，而且報出的是404， ????????/*//那么應該是你這個請求文件寫錯了server.php寫成了service.php。 ????????/*// ????????request.open('POST','server.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>? ? ? ?/*
? ? ? ?/*//如果是課程提供的源碼，而且報出的是404，
? ? ? ?/*//那么應該是你這個請求文件寫錯了server.php寫成了service.php。
? ? ? ?/*//