Ajax的实现需要服务器端和客户端配合来实现
下面看服务器端的代码，也就是用php编写的一个后台脚本文件
1 <?php 2 //设置页面内容，编码格式是utf8 3 header("Content-Type:text/plain;charset=utf-8"); 4 //定义一个多维数组，每条员工信息为一个数组 5 $staff = array( 6 array('name' =>'杰伦' ,'number'=>'01' ,'sex'=>'男' ,'job'=>'总经理' ), 7 array('name' =>'弈迅' ,'number'=>'02' ,'sex'=>'男' ,'job'=>'开发经理' ), 8 array('name' =>'力宏' ,'number'=>'03' ,'sex'=>'男' ,'job'=>'产品经理' ) 9 ); 10 //判断请求方式，如果是get请求则进入search方法，post请求进入create方法 11 //$_SERVER是超全局变量，在一个脚本文件的全部作用域都能使用 12 //$_SERVER["REQUEST_METHOD"]返回页面使用的请求方法 13 if($_SERVER["REQUEST_METHOD"] == "GET") { 14 search();//搜索员工 15 }elseif ($_SERVER["REQUEST_METHOD"] == "POST") { 16 # code... 17 create();//新建员工 18 } 19 //通过员工编号搜索员工 20 function search(){ 21 //检查是否有员工编号的参数 22 //issent检测变量是否设置，empty判断值是否为空 23 //超全局变量$_GET和$_POST用来收集表单数据 24 if(!isset($_GET["number"])||empty($_GET["number"])){ 25 echo "参数错误"; 26 return; 27 } 28 //函数之外声明的变量拥有Global作用域，只能在函数以外进行访问 29 //需要用global关键词，才能访问函数内的全局变量 30 global $staff; 31 //获取number参数 32 $number = $_GET["number"]; 33 $result = "没有员工。"; 34 //遍历staff数组，查找key值为number的员工是否存在 35 foreach ($staff as $value) { 36 # code... 37 if($value["number"] == $number){ 38 $result="找到员工：员工编号：".$value["number"]. 39 ",员工姓名：".$value["name"]. 40 ",员工性别：".$value["sex"]. 41 ",员工职位：".$value["job"]; 42 break; 43 } 44 } 45 echo $result; 46 } 47 48 //创建员工 49 function create(){ 50 //判断信息是否写全 51 if(!isset($_POST["name"]) || empty($_POST["name"]) 52 || !isset($_POST["number"]) || empty($_POST["number"]) 53 || !isset($_POST["sex"]) || empty($_POST["sex"]) 54 || !isset($_POST["job"]) || empty($_POST["job"])){ 55 echo "参数错误，员工信息填写不全"; 56 return; 57 } 58 59 echo "员工：".$_POST["name"]."信息保存成功！"; 60 } 61 62 ?>
客户端的代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 11 <body> 12 <h1>员工查询</h1> 13 <label>请输入员工编号：</label> 14 <input type="text" id="keyword"> 15 <button id="search">查询</button> 16 <p id="searchResult"></p> 17 18 <h1>员工新建</h1> 19 <label>请输入员工姓名：</label> 20 <input type="text" id="staffName"><br> 21 <label>请输入员工编号：</label> 22 <input type="text" id="staffNumber"><br> 23 <label for="">请输入员工性别：</label> 24 <select id="staffSex"> 25 <option>男</option> 26 <option>女</option> 27 </select><br> 28 <label>请输入员工职位：</label> 29 <input type="text" id="staffJob"><br> 30 <button id="save">保存</button> 31 <p id="createResult"></p> 32 33 34 <script type="text/javascript"> 35 document.getElementById("search").onclick=function(){ 36 //发送Ajax查询请求并处理 37 //新建一个XHR对象 38 var request = new XMLHttpRequest(); 39 //调用open方法(get方法，地址)地址上需要带一些参数 40 request.open("GET","newPHP.php?number=" + document.getElementById("keyword").value); 41 //使用send()方法发送请求 42 request.send(); 43 //通过onreadystatechange事件来监听请求 44 request.onreadystatechange=function(){ 45 //readyState=4则表示请求结束 46 if(request.readyState === 4){ 47 //status=200表示请求成功 48 if(request.status === 200){ 49 //通过responseText来获取报文并赋给DOM，用来显示查询结果 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 //调用open方法(post方法，地址)把参数直接传到send方法 61 request.open("POST","newPHP.php"); 62 //构造参数data 63 var data = "name=" + document.getElementById("staffName").value 64 + "&number=" + document.getElementById("staffNumber").value 65 + "&sex=" + document.getElementById("staffSex").value 66 + "&job=" + document.getElementById("staffJob").value; 67 //设置content-type 68 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 69 request.send(data); 70 request.onreadystatechange=function(){ 71 if(request.readyState === 4){ 72 if(request.status === 200){ 73 document.getElementById("createResult").innerHTML = request.responseText; 74 }else{ 75 alert("发生错误" + request.status); 76 } 77 } 78 } 79 } 80 </script> 81 </body> 82 83 </html>
具体的一些属性比如responseText，一些方法response.open
想要具体了解这些，可以看我之前的一篇：