1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>Demo</title> 6 <style> 7 body, input, select, button, h1 { 8 font-size: 28px; 9 line-height:1.7; 10 } 11 </style> 12 </head> 13 14 <body> 15 16 <h1>员工查询</h1> 17 18 <label>请输入员工编号：</label> 19 <input type="text" id="keyword" /> 20 <button id="search">查询</button> 21 <p id="searchResult"></p> 22 23 <h1>员工新建</h1> 24 <label>请输入员工姓名：</label> 25 <input type="text" id="staffName" /><br> 26 <label>请输入员工编号：</label> 27 <input type="text" id="staffNumber" /><br> 28 <label>请选择员工性别：</label> 29 <select id="staffSex"> 30 <option>女</option> 31 <option>男</option> 32 </select><br> 33 <label>请输入员工职位：</label> 34 <input type="text" id="staffJob" /><br> 35 <button id="save">保存</button> 36 <p id="createResult"></p> 37 38 <script> 39 document.getElementById("search").onclick = function() { 40 //发送查询请求并处理 41 var request = new XMLHttpRequest(); 42 //获取keyword的取值 43 request.open("GET", "server.php?number=" + document.getElementById("keyword").value); 44 //发送出去请求 45 request.send(); 46 //监听事件 47 request.onreadystatechange = function() { 48 if (request.readyState===4) { 49 if (request.status===200) { //判断是否请求成果 50 document.getElementById("searchResult").innerHTML = request.responseText; 51 } else { 52 alert("发生错误：" + request.status);//返回错误信息状态 53 } 54 } 55 } 56 } 57 58 document.getElementById("save").onclick = function() { 59 var request = new XMLHttpRequest(); 60 request.open("POST", "server.php"); 61 var data = "name=" + document.getElementById("staffName").value 62 + "&number=" + document.getElementById("staffNumber").value 63 + "&sex=" + document.getElementById("staffSex").value 64 + "&job=" + document.getElementById("staffJob").value; 65 // 66 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 67 request.send(data); 68 request.onreadystatechange = function() { 69 if (request.readyState===4) { 70 if (request.status===200) { 71 document.getElementById("createResult").innerHTML = request.responseText; 72 } else { 73 alert("发生错误：" + request.status); 74 } 75 } 76 } 77 } 78 </script> 79 </body> 80 </html>
底下是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 }