前期準備
1、安裝wampserver或者其他相似軟件來搭建本地集成安裝環境，我安裝的是phpstudy
2、html、js、css等文件需要放置在PHPstudy中的WWW目錄中，默認運行index頁面
3、bootstrap.css
界面截圖：
phpstudy用起來很方便，如果你的電腦沒有安裝過php，那要先配置系統環境變量，將php.exe(在PHPstudy的安裝目錄里找)的路徑添加進去，然后在cmd里輸入 php -v ,出現php的安裝版本等信息則說明安裝成功。
然后新建一個項目在PHPstudy的WWW文件夾下，這里我取名為AjaxDemo。
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" /> <style> .container{ width: 50%; margin-top: 30px; } .text-danger{ margin-top: 6px; } </style></head><body> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title">員工查詢</div> </div> <div class="panel-body"> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-2 control-label">員工編號：</label> <div class="col-md-8"> <input type="text" class="form-control" id="keyword"> </div> <div class="col-md-1"> <button class="btn btn-primary" id="search">查詢</button> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">查詢結果：</label> <p class="text-danger col-md-8" id="searchResult"></p> </div> </div> </div> </div> </div> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title">員工增加</div> </div> <div class="panel-body"> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-2 control-label">員工編號：</label> <div class="col-md-8"> <input type="text" class="form-control" id="add-number"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">員工姓名：</label> <div class="col-md-8"> <input type="text" class="form-control" id="add-name"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">員工性別：</label> <div class="col-md-8"> <input type="text" class="form-control" id="add-sex"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">員工職位：</label> <div class="col-md-8"> <input type="text" class="form-control" id="add-job"> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-1"> <button class="btn btn-primary" id="add-search">增加員工</button> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">結果：</label> <p class="text-danger col-md-8" id="add-resultshow"></p> </div> </div> </div> </div> </div> <script src="staffManage.js"></script></body></html>
新聞熱點
疑難解答
圖片精選
