例子简介
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 });
更多专业前端知识,请上 【猿2048】www.mk2048.com