Ajax全接触（2）

例子简介

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     });

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/luoyanan/p/5467066.html