前期準(zhǔn)備
1、安裝wampserver或者其他相似軟件來(lái)搭建本地集成安裝環(huán)境，我安裝的是phpstudy
2、html、js、css等文件需要放置在PHPstudy中的WWW目錄中，默認(rèn)運(yùn)行index頁(yè)面
3、bootstrap.css
界面截圖：
phpstudy用起來(lái)很方便，如果你的電腦沒(méi)有安裝過(guò)php，那要先配置系統(tǒng)環(huán)境變量，將php.exe(在PHPstudy的安裝目錄里找)的路徑添加進(jìn)去，然后在cmd里輸入 php -v ,出現(xiàn)php的安裝版本等信息則說(shuō)明安裝成功。
然后新建一個(gè)項(xiàng)目在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">員工編號(hào)：</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">查詢結(jié)果：</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">員工編號(hào)：</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">結(jié)果：</label> <p class="text-danger col-md-8" id="add-resultshow"></p> </div> </div> </div> </div> </div> <script src="staffManage.js"></script></body></html>staffManage.js
實(shí)例化Ajax可分為五點(diǎn)，比較好記：
1、new一個(gè)XMLHttpRequest實(shí)例
注意兼容低版本的IE瀏覽器
var xhr; if (window.XMLHttpRequest) { xhr= new XMLHttpRequest(); } else { xhr= new ActiveXObject(‘Microsoft.XMLHTTP'); } 2、open(method,url,asyn)
XMLHttpRequest對(duì)象的open()方法有3個(gè)參數(shù)，第一個(gè)參數(shù)指定是GET還是POST，第二個(gè)參數(shù)指定URL地址，第三個(gè)參數(shù)指定是否使用異步，默認(rèn)是true，所以不用寫(xiě)。
3*若是post請(qǐng)求還要加上請(qǐng)求頭 setRequestHeader（”Content-Type”,”application/x-www-form-urlencoded”）
4、send
調(diào)用send()方法才真正發(fā)送請(qǐng)求。GET請(qǐng)求不需要參數(shù)，POST請(qǐng)求需要把body部分以字符串或者FormData對(duì)象傳進(jìn)去。
5、onReadyStateChange
6、responseText
// 查詢員工方法 var oKeyword=document.getElementById('keyword'), //員工編號(hào) oSearchBtn=document.getElementById('search'), //查詢按鈕 oSearchRes=document.getElementById('searchResult'); //反饋結(jié)果顯示 // 查詢員工按鈕點(diǎn)擊事件 oSearchBtn.onclick=function(){ searchStaff(); } // 創(chuàng)建查詢員工方法 function searchStaff(){ //var xhr=new XMLHttpRequest(); //標(biāo)準(zhǔn)寫(xiě)法和IE寫(xiě)法混在一起，可以兼容低版本的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(); //當(dāng)創(chuàng)建了XMLHttpRequest對(duì)象后，要先設(shè)置onreadystatechange的回調(diào)函數(shù)。在回調(diào)函數(shù)中，通常我們只需通過(guò)readyState === 4判斷請(qǐng)求是否完成，如果已完成，再根據(jù)status === 200判斷是否是一個(gè)成功的響應(yīng)。 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'), //員工編號(hào) 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'); //反饋結(jié)果顯示 // 增加員工按鈕點(diǎn)擊事件 oAddSearch.onclick=function(){ createStaff(); } // 創(chuàng)建增加員工方法 function createStaff(){ var xhr; if(xhr.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('POST','serverjson.php'); //這里注意key=value的等于號(hào)兩邊不要出現(xiàn)空格，會(huì)出現(xiàn)錯(cuò)誤 var data='name='+oAddname.value +'&number='+oAddnumber.value +'&sex='+oAddsex.value +'&job='+oAddjob.value; //在open和send之間設(shè)置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='出現(xiàn)錯(cuò)誤：'+data.msg; } }else{ alert('發(fā)生錯(cuò)誤！'+xhr.status) } } } }serverjson.php
<?php//設(shè)置頁(yè)面內(nèi)容是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");//定義一個(gè)多維數(shù)組，包含員工的信息，每條員工信息為一個(gè)數(shù)組$staff = array ( array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經(jīng)理"), array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開(kāi)發(fā)工程師"), array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產(chǎn)品經(jīng)理") );//判斷如果是get請(qǐng)求，則進(jìn)行搜索；如果是POST請(qǐng)求，則進(jìn)行新建//$_SERVER是一個(gè)超全局變量，在一個(gè)腳本的全部作用域中都可用，不用使用global關(guān)鍵字//$_SERVER["REQUEST_METHOD"]返回訪問(wèn)頁(yè)面使用的請(qǐng)求方法if ($_SERVER["REQUEST_METHOD"] == "GET") { search();} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){ create();}//通過(guò)員工編號(hào)搜索員工function search(){ //檢查是否有員工編號(hào)的參數(shù) //isset檢測(cè)變量是否設(shè)置；empty判斷值為否為空 //超全局變量 $_GET 和 $_POST 用于收集表單數(shù)據(jù) if (!isset($_GET["number"]) || empty($_GET["number"])) { echo '{"success":false,"msg":"參數(shù)錯(cuò)誤"}'; return; } //函數(shù)之外聲明的變量擁有 Global 作用域，只能在函數(shù)以外進(jìn)行訪問(wèn)。 //global 關(guān)鍵詞用于訪問(wèn)函數(shù)內(nèi)的全局變量 global $staff; //獲取number參數(shù) $number = $_GET["number"]; $result = '{"success":false,"msg":"沒(méi)有找到員工。"}'; //遍歷$staff多維數(shù)組，查找key值為number的員工是否存在，如果存在，則修改返回結(jié)果 foreach ($staff as $value) { if ($value["number"] == $number) { $result = '{"success":true,"msg":"找到員工：?jiǎn)T工編號(hào)：' . $value["number"] . '，員工姓名：' . $value["name"] . '，員工性別：' . $value["sex"] . '，員工職位：' . $value["job"] . '"}'; break; } } echo $result;}//創(chuàng)建員工function create(){ //判斷信息是否填寫(xiě)完全 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":"參數(shù)錯(cuò)誤，員工信息填寫(xiě)不全"}'; return; } //TODO: 獲取POST表單數(shù)據(jù)并保存到數(shù)據(jù)庫(kù) //提示保存成功 echo '{"success":true,"msg":"員工：' . $_POST["name"] . ' 信息保存成功！"}';}?>總結(jié)
整個(gè)過(guò)程大概如圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
