例子简介
1.查询员工信息，可以通过输入员工编号查询员工基本信息；
2.新建员工信息，包含员工姓名，员工编号，员工性别，员工职位；
实现：
1.纯html页面，用来实现员工查询和新建的页面；
2.php页面，用来实现查询员工和新建员工的后台接口
PHP简介
PHP是一种创建动态交互性站点的服务器端脚本语言
PHP能够生成动态页面内容
PHP能够创建、打开、读取、写入、删除以及关闭服务器上的文件
PHP能够接收表单数据
PHP能够发送并取回cookies
PHP能够添加、删除、修改数据库中的数据
PHP能够限制用户访问网站中的某些页面
php部分：
一.
1 <?php 2 //设置页面内容是html编码格式是utf-8 3 header("Content-Type: text/plain;charset=utf-8"); 4 //header("Content-Type: application/json;charset=utf-8"); 5 //header("Content-Type: text/xml;charset=utf-8"); 6 //header("Content-Type: text/html;charset=utf-8"); 7 //header("Content-Type: application/javascript;charset=utf-8"); 8 9 //定义一个多维数组，包含员工的信息，每条员工信息为一个数组 10 $staff = array 11 ( 12 array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"), 13 array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"), 14 array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理") 15 ); 16 17 //判断如果是get请求，则进行搜索；如果是POST请求，则进行新建 18 //$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字 19 //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法 20 if ($_SERVER["REQUEST_METHOD"] == "GET") { 21 search(); 22 } elseif ($_SERVER["REQUEST_METHOD"] == "POST"){ 23 create(); 24 } 25 26 //通过员工编号搜索员工 27 function search(){ 28 //检查是否有员工编号的参数 29 //isset检测变量是否设置；empty判断值为否为空 30 //超全局变量 $_GET 和 $_POST 用于收集表单数据 31 if (!isset($_GET["number"]) || empty($_GET["number"])) { 32 echo "参数错误"; 33 return; 34 } 35 //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。 36 //global 关键词用于访问函数内的全局变量 37 global $staff; 38 //获取number参数 39 $number = $_GET["number"]; 40 $result = "没有找到员工。"; 41 42 //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果 43 foreach ($staff as $value) { 44 if ($value["number"] == $number) { 45 $result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] . 46 "，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"]; 47 break; 48 } 49 } 50 echo $result; 51 } 52 53 //创建员工 54 function create(){ 55 //判断信息是否填写完全 56 if (!isset($_POST["name"]) || empty($_POST["name"]) 57 || !isset($_POST["number"]) || empty($_POST["number"]) 58 || !isset($_POST["sex"]) || empty($_POST["sex"]) 59 || !isset($_POST["job"]) || empty($_POST["job"])) { 60 echo "参数错误，员工信息填写不全"; 61 return; 62 } 63 //TODO: 获取POST表单数据并保存到数据库 64 65 //提示保存成功 66 echo "员工：" . $_POST["name"] . " 信息保存成功！"; 67 }
客户端代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>XMLHttpRequest</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 body,input,button,select,h1{ 8 font-size: 30px; 9 line-height: 1.8em; 10 } 11 </style> 12 </head> 13 <body> 14 <h1>员工查询</h1> 15 <label>请输入员工编号：</label> 16 <input type="text" id="keyword" /> 17 <button id="search">查询</button> 18 <p id="searchResult"></p> 19 20 <h1>员工创建</h1> 21 <label>请输入员工姓名：</label> 22 <input type="text" id="staffName" /><br/> 23 <label>请输入员工编号：</label> 24 <input type="text" id="staffNumber" /><br/> 25 <label>请输入员工性别：</label> 26 <select id="staffSex"> 27 <option>男</option> 28 <option>女</option> 29 </select><br/> 30 <label>请输入员工职位：</label> 31 <input type="text" id="staffJob" /><br/> 32 <button id="save">保存</button><br/> 33 <p id="createResult"></p> 34 35 <script type="text/javascript"> 36 //查询员工信息 37 document.getElementById("search").onclick=function(){ 38 //发送Ajax查询请求并处理 39 var request=new XMLHttpRequest(); 40 request.open("GET","index.php?number="+document.getElementById("keyword").value); 41 request.send(); 42 request.onreadystatechange=function(){ 43 if(request.readyState===4){ 44 if(request.status===200){ 45 //表示请求成功 46 document.getElementById("searchResult").innerHTML=request.responseText; 47 }else{ 48 alert("发生错误："+request.status); 49 } 50 } 51 } 52 } 53 54 //创建员工信息 55 document.getElementById("save").onclick=function(){ 56 //发送Ajax查询请求并处理 57 var request=new XMLHttpRequest(); 58 request.open("POST","index.php"); 59 var data="name="+document.getElementById("staffName").value+"&number="+document.getElementById("staffNumber").value+"&sex="+document.getElementById("staffSex").value+"&job="+document.getElementById("staffJob").value; 60 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 61 request.send(data); 62 request.onreadystatechange=function(){ 63 if(request.readyState===4){ 64 if(request.status===200){ 65 //表示请求成功 66 document.getElementById("searchResult").innerHTML=request.responseText; 67 }else{ 68 alert("发生错误："+request.status); 69 } 70 } 71 } 72 } 73 74 </script> 75 </body> 76 </html>
二.用JSON检验
服务器端改进：
1 function search(){ 2 //检查是否有员工编号的参数 3 //isset检测变量是否设置；empty判断值为否为空 4 //超全局变量 $_GET 和 $_POST 用于收集表单数据 5 if (!isset($_GET["number"]) || empty($_GET["number"])) { 6 echo '{"success":false,"msg":"参数错误"}'; 7 return; 8 } 9 //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。 10 //global 关键词用于访问函数内的全局变量 11 global $staff; 12 //获取number参数 13 $number = $_GET["number"]; 14 $result = '{"success":false,"msg":"没有找到员工。"}'; 15 16 //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果 17 foreach ($staff as $value) { 18 if ($value["number"] == $number) { 19 $result = '{"success":true,"msg":"找到员工：员工编号：' . $value["number"] . 20 '，员工姓名：' . $value["name"] . 21 '，员工性别：' . $value["sex"] . 22 '，员工职位：' . $value["job"] . '"}'; 23 break; 24 } 25 } 26 echo $result; 27 } 28 29 //创建员工 30 function create(){ 31 //判断信息是否填写完全 32 if (!isset($_POST["name"]) || empty($_POST["name"]) 33 || !isset($_POST["number"]) || empty($_POST["number"]) 34 || !isset($_POST["sex"]) || empty($_POST["sex"]) 35 || !isset($_POST["job"]) || empty($_POST["job"])) { 36 echo '{"success":false,"msg":"参数错误，员工信息填写不全"}'; 37 return; 38 } 39 //TODO: 获取POST表单数据并保存到数据库 40 41 //提示保存成功 42 echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}'; 43 }
客户端改进（JS部分）：
1 <script> 2 document.getElementById("search").onclick = function() { 3 var request = new XMLHttpRequest(); 4 request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value); 5 request.send(); 6 request.onreadystatechange = function() { 7 if (request.readyState===4) { 8 if (request.status===200) { 9 var data = JSON.parse(request.responseText); 10 if (data.success) { 11 document.getElementById("searchResult").innerHTML = data.msg; 12 } else { 13 document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg; 14 } 15 } else { 16 alert("发生错误：" + request.status); 17 } 18 } 19 } 20 } 21 22 document.getElementById("save").onclick = function() { 23 var request = new XMLHttpRequest(); 24 request.open("POST", "serverjson.php"); 25 var data = "name=" + document.getElementById("staffName").value 26 + "&number=" + document.getElementById("staffNumber").value 27 + "&sex=" + document.getElementById("staffSex").value 28 + "&job=" + document.getElementById("staffJob").value; 29 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 30 request.send(data); 31 request.onreadystatechange = function() { 32 if (request.readyState===4) { 33 if (request.status===200) { 34 var data = JSON.parse(request.responseText); 35 if (data.success) { 36 document.getElementById("createResult").innerHTML = data.msg; 37 } else { 38 document.getElementById("createResult").innerHTML = "出现错误：" + data.msg; 39 } 40 } else { 41 alert("发生错误：" + request.status); 42 } 43 } 44 } 45 } 46 </script>
三.用jQuery实现Ajax
客户端改变：
1 <script type="text/javascript"> 2 //用jQuery方法 3 4 $(document).ready(function(){ 5 $("#search").click(function(){ 6 $.ajax({ 7 type:"GET", 8 url:"service.php?number="+$("#keyword").val(), 9 dataType:"json", 10 success:function(data){ 11 if(data.success){ 12 $("#searchResult").html(data.msg); 13 }else{ 14 $("#searchResult").html("出现错误："+data.msg); 15 } 16 }, 17 error:function(jqXHR){ 18 alert("发生错误："+jqXHR.status); 19 } 20 }); 21 }); 22 23 $("#save").click(function(){ 24 $.ajax({ 25 type:"POST", 26 url:"service.php", 27 dataType:"json", 28 data:{ 29 name:$("#staffName").val(), 30 number:$("#staffNumber").val(), 31 sex:$("#staffSex").val(), 32 job:$("#staffJob").val() 33 }, 34 success:function(data){ 35 if(data.success){ 36 $("#createResult").html(data.msg); 37 }else{ 38 $("#createResult").html("出现错误："+data.msg); 39 } 40 }, 41 error:function(jqXHR){ 42 alert("发生错误："+jqXHR.status); 43 } 44 }); 45 }); 46 });
