前期準備
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" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <style> .container{ width: 50%; margin-top: 30px; } .text-danger{ margin-top: 6px; } </style></head><body> <p class="container"> <p class="panel panel-default"> <p class="panel-heading"> <p class="panel-title">員工查詢</p> </p> <p class="panel-body"> <p class="form-horizontal"> <p class="form-group"> <label class="col-md-2 control-label">員工編號：</label> <p class="col-md-8"> <input type="text" class="form-control" id="keyword"> </p> <p class="col-md-1"> <button class="btn btn-primary" id="search">查詢</button> </p> </p> <p class="form-group"> <label class="col-md-2 control-label">查詢結果：</label> <p class="text-danger col-md-8" id="searchResult"></p> </p> </p> </p> </p> </p> <p class="container"> <p class="panel panel-default"> <p class="panel-heading"> <p class="panel-title">員工增加</p> </p> <p class="panel-body"> <p class="form-horizontal"> <p class="form-group"> <label class="col-md-2 control-label">員工編號：</label> <p class="col-md-8"> <input type="text" class="form-control" id="add-number"> </p> </p> <p class="form-group"> <label class="col-md-2 control-label">員工姓名：</label> <p class="col-md-8"> <input type="text" class="form-control" id="add-name"> </p> </p> <p class="form-group"> <label class="col-md-2 control-label">員工性別：</label> <p class="col-md-8"> <input type="text" class="form-control" id="add-sex"> </p> </p> <p class="form-group"> <label class="col-md-2 control-label">員工職位：</label> <p class="col-md-8"> <input type="text" class="form-control" id="add-job"> </p> </p> <p class="form-group"> <p class="col-md-offset-2 col-md-1"> <button class="btn btn-primary" id="add-search">增加員工</button> </p> </p> <p class="form-group"> <label class="col-md-2 control-label">結果：</label> <p class="text-danger col-md-8" id="add-resultshow"></p> </p> </p> </p> </p> </p> <script src="staffManage.js"></script></body></html>
staffManage.js
執行個體化Ajax可分為五點，比較好記：
1、new一個XMLHttpRequest執行個體
注意相容低版本的IE瀏覽器
var xhr; if (window.XMLHttpRequest) { xhr= new XMLHttpRequest(); } else { xhr= new ActiveXObject(‘Microsoft.XMLHTTP'); }
2、open(method,url,asyn)
XMLHttpRequest對象的open()方法有3個參數，第一個參數指定是GET還是POST，第二個參數指定URL地址，第三個參數指定是否使用非同步，預設是true，所以不用寫。
3*若是post請求還要加上要求標頭 setRequestHeader（”Content-Type”,”application/x-www-form-urlencoded”）
4、send
調用send()方法才真正發送請求。GET請求不需要參數，POST請求需要把body部分以字串或者FormData對象傳進去。
5、onReadyStateChange
6、responseText
// 查詢員工方法 var oKeyword=document.getElementById('keyword'), //員工編號 oSearchBtn=document.getElementById('search'), //查詢按鈕 oSearchRes=document.getElementById('searchResult'); //反饋結果顯示 // 查詢員工按鈕點擊事件 oSearchBtn.onclick=function(){ searchStaff(); } // 建立查詢員工方法 function searchStaff(){ //var xhr=new XMLHttpRequest(); //標準寫法和IE寫法混在一起，可以相容低版本的IE瀏覽器 var xhr; if (window.XMLHttpRequest) { xhr= new XMLHttpRequest(); } else { xhr= new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('GET','serverjson.php?number='+oKeyword.value); xhr.send(); //當建立了XMLHttpRequest對象後，要先設定onreadystatechange的回呼函數。在回呼函數中，通常我們只需通過readyState === 4判斷請求是否完成，如果已完成，再根據status === 200判斷是否是一個成功的響應。 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status=200){ var data=JSON.parse(xhr.responseText); //json解析方法JSON.parse 或者 eval('('+xhr.responseText+')') oSearchRes.innerHTML=data.msg; } } } } // 增加員工 var oAddnumber=document.getElementById('add-number'), //員工編號 oAddname=document.getElementById('add-name'), //員工姓名 oAddsex=document.getElementById('add-sex'), //員工性別 oAddjob=document.getElementById('add-job'), //員工職位 oAddSearch=document.getElementById('add-search'), //增加員工按鈕 oAddResult=document.getElementById('add-resultshow'); //反饋結果顯示 // 增加員工按鈕點擊事件 oAddSearch.onclick=function(){ createStaff(); } // 建立增加員工方法 function createStaff(){ var xhr; if(xhr.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('POST','serverjson.php'); //這裡注意key=value的等號兩邊不要出現空格，會出現錯誤 var data='name='+oAddname.value +'&number='+oAddnumber.value +'&sex='+oAddsex.value +'&job='+oAddjob.value; //在open和send之間設定Content-Type xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(data); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status=200){ var data=JSON.parse(xhr.responseText); if(data.success){ oAddResult.innerHTML=data.msg; }else{ oAddResult.innerHTML='出現錯誤：'+data.msg; } }else{ alert('發生錯誤！'+xhr.status) } } } }
serverjson.php
<?php//設定頁面內容是html編碼格式是utf-8header("Content-Type: text/plain;charset=utf-8"); //header("Content-Type: application/json;charset=utf-8"); //header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8");//定義一個多維陣列，包含員工的資訊，每條員工資訊為一個數組$staff = array ( array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"), array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"), array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理") );//判斷如果是get請求，則進行搜尋；如果是POST請求，則進行建立//$_SERVER是一個超全域變數，在一個指令碼的全部範圍中都可用，不用使用global關鍵字//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的要求方法if ($_SERVER["REQUEST_METHOD"] == "GET") { search();} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){ create();}//通過員工編號搜尋員工function search(){ //檢查是否有員工編號的參數 //isset檢測變數是否設定；empty判斷值為否為空白 //超全域變數 $_GET 和 $_POST 用於收集表單資料 if (!isset($_GET["number"]) || empty($_GET["number"])) { echo '{"success":false,"msg":"參數錯誤"}'; return; } //函數之外聲明的變數擁有 Global 範圍，只能在函數以外進行訪問。 //global 關鍵詞用於訪問函數內的全域變數 global $staff; //擷取number參數 $number = $_GET["number"]; $result = '{"success":false,"msg":"沒有找到員工。"}'; //遍曆$staff多維陣列，尋找key值為number的員工是否存在，如果存在，則修改返回結果 foreach ($staff as $value) { if ($value["number"] == $number) { $result = '{"success":true,"msg":"找到員工：員工編號：' . $value["number"] . '，員工姓名：' . $value["name"] . '，員工性別：' . $value["sex"] . '，員工職位：' . $value["job"] . '"}'; break; } } echo $result;}//建立員工function create(){ //判斷資訊是否填寫完全 if (!isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["number"]) || empty($_POST["number"]) || !isset($_POST["sex"]) || empty($_POST["sex"]) || !isset($_POST["job"]) || empty($_POST["job"])) { echo '{"success":false,"msg":"參數錯誤，員工資訊填寫不全"}'; return; } //TODO: 擷取POST表單資料並儲存到資料庫 //提示儲存成功 echo '{"success":true,"msg":"員工：' . $_POST["name"] . ' 資訊儲存成功！"}';}?>
總結
整個過程大概
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
