                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /Ajax全接觸

service.php代碼——20170412

<?php
//設(shè)置頁(yè)面內(nèi)容是html編碼格式是utf-8
//header("Content-Type:text/plain;charset=utf-8");
header("Content-Type:application/json;charset=utf-8");
//定義一個(gè)多維數(shù)組，包含員工的信息，每條員工信息為一個(gè)數(shù)組
$staff=array(
????array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>"總經(jīng)理"),
????array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"開發(fā)工程師"),
????array("name"=>"黃蓉","number"=>"103","sex"=>"女","job"=>"產(chǎn)品經(jīng)理"),
);
//判斷如果是get請(qǐng)求，則進(jìn)行搜索，如果是post秦秋，則進(jìn)行新建
//$_SERVER是一個(gè)超全局變量，在一個(gè)腳本的全部作用域中都可用，不用使用global關(guān)鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁(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ù)之外聲明的變量擁有g(shù)lobal作用于，只能在函數(shù)以外進(jìn)行訪問
????//global關(guān)鍵詞用于訪問函數(shù)內(nèi)的全局變量
????global?$staff;
????//獲取number參數(shù)
????$number=$_GET["number"];
????$result='{"success":false,"msg":"沒有找到員工"}';
????//遍歷$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(){
????//判斷信息是否填寫完全
????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ò)誤，員工信息填寫不全"}';
????????return;
????}
????//TODO：獲取post表單數(shù)據(jù)并保存到數(shù)據(jù)庫(kù)

????//提示保存成功
????echo?'{"success":ture,"msg":"員工：'.$_POST["name"].'信息保存成功！"}';
}
?>

aSuncat

2017-04-12

源自：Ajax全接觸 4-2

關(guān)注問題我要回答

750

操作

收起

1 回答

aSuncat 提問者
2017-04-12

demo.html代碼：

<!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>請(qǐng)輸入員工編號(hào)：</label>
????<input?type="text"?id="keyword"/>
????<button?id="search">查詢</button>
????<p?id="searchResult"></p>

????<h1>員工創(chuàng)建</h1>
????<label>請(qǐng)輸入員工姓名：</label>
????<input?type="text"?id="staffName"/>
????<br>
????<label>請(qǐng)輸入員工編號(hào)：</label>
????<input?type="text"?id="staffNumber"/>
????<br>
????<label>請(qǐng)選擇員工性別：</label>
????<select?id="staffSex">
????????<option>男</option>
????????<option>女</option>
????</select>
????<br>
????<label>請(qǐng)輸入員工職位：</label>
????<input?type="text"?id="staffJob"/>
????<button?id="save">保存</button>
????<p?id="createResult"></p>
</div>
<script>
????document.getElementById('search').onclick=function(){
????????//發(fā)送ajax查詢請(qǐng)求并處理
????????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){
????????????????????var?data=JSON.parse(request.responseText);
????????????????????if(data.success){
????????????????????????document.getElementById('searchResult').innerHTML=data.msg;
????????????????????}else{
????????????????????????document.getElementById('searchResult').innerHTML="出現(xiàn)錯(cuò)誤："+data.msg;
????????????????????}
????????????????}else{
????????????????????alert('發(fā)生錯(cuò)誤'+request.status);
????????????????}
????????????}
????????}
????};

????document.getElementById('save').onclick=function(){
????????//發(fā)送ajax保存請(qǐng)求并處理
????????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，如果不寫，則表單填全了還會(huì)提示'參數(shù)錯(cuò)誤，員工信息填寫不全'
????????request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
????????request.send(data);
????????request.onreadystatechange=function(){
????????????if(request.readyState===4){
????????????????if(request.status===200){
????????????????????var?data=JSON.parse(request.responseText);
????????????????????if(data.success){
????????????????????????document.getElementById('createResult').innerHTML=data.msg;
????????????????????}else{
????????????????????????document.getElementById('createResult').innerHTML="出現(xiàn)錯(cuò)誤："+data.msg;
????????????????????}
????????????????}else{
????????????????????alert('發(fā)生錯(cuò)誤'+request.status);
????????????????}
????????????}
????????}
????};
</script>
</body>
</html>