AJAX + PHP-CSDN博客

本文链接：https://blog.csdn.net/juanwy/article/details/50804108

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
   *{
     font-size:20px;
     line-height: 15px;
   }
</style>
</head>
    <body>
        <h1>员工查询</h1><br/>
        <label for="">请输入员工编号：</label>
                <input type="text"  id="keyword" name="number"/>
        <button id="search">查询</button><br/>
        <p id="searchResult"></p>
        <h1>员工创建</h1><br/>
        <label for="">请输入员工姓名：</label>
                <input type="text" id="name" name="name"/><br/>
        <label for="">请输入员工编号：</label>
                <input type="text"  id="number" name="number"/><br/>
        <label for="">请输入员工性别：</label>
        <select name="" id="sex" name="sex">
                <option value="男" selected = "selected" >男</option>
                <option value="女">女</option>
        </select><br/>
        <label for="">请输入员工职位：</label>
                <input type="text"  id="job" name="job"/><br/>
        <button id="create">保存</button>
        <p id="createResult"></p>
    </body>
    <script>

        // document.getElementById('search').οnclick=function(){
        //     var request = new XMLHttpRequest();
        //     request.open("GET","serive.php?number="+document.getElementById("keyword").value);
        //      request.send();
        //      request.onreadystatechange = function(){
        //         if(request.readyState ===4){
        //             if(request.status === 200){
        //                 document.getElementById("searchResult").innerHTML = request.responseText;
        //             }else{
        //                 alert("发生错误："+request.status)
        //             }
        //         }
        //      }
        // }

        document.getElementById('create').οnclick=function(){
            var request = new XMLHttpRequest();
            request.open("POST","serive.php");
            request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            var data = "name="+document.getElementById("name").value+"&number="+document.getElementById("number").value+"&sex="+document.getElementById("sex").value+"&job="+document.getElementById("job").value;
             request.send(data);
             request.onreadystatechange = function(){
                if(request.readyState ===4){
                    if(request.status === 200){
                        document.getElementById("createResult").innerHTML = request.responseText;
                    }else{
                        alert("发生错误："+request.status)
                    }
                }
             }
        }
    </script>
</html>

<?php 
/****
author:ywj;
****/
header("Content-type:text/html;Charset=utf-8");

//定义一个用户数组（这里不牵连数据库了，简单调用下）
$staff = array(
		array("name"=>"小红","number"=>"1","sex"=>"女","job"=>"总经理"),
		array("name"=>"黄花","number"=>"2","sex"=>"女","job"=>"秘书"),
		array("name"=>"绿叶","number"=>"3","sex"=>"男","job"=>"司机")
	);

if($_SERVER["REQUEST_METHOD"]=="GET"){
	search();
}elseif ($_SERVER["REQUEST_METHOD"]=="POST") {
	create();
}
function search(){
	if(!isset($_GET["number"])||empty($_GET["number"])){
		echo "参数错误!";
		return;
	}
	global $staff;
	$number=$_GET["number"];
	$result = "没有员工信息！";
	foreach($staff as $value){
		if($value["number"]==$number){
			$result = "找到员工：员工编号：".$value["number"]."，员工姓名：".$value["name"]."，员工性别：".$value["sex"]."，员工职位：".$value["job"];
			break;
		}
	}
}
function create(){
	if(!isset($_POST["number"])||empty($_POST["number"])||!isset($_POST["name"])||empty($_POST["name"])||!isset($_POST["sex"])||empty($_POST["sex"])||!isset($_POST["job"])||empty($_POST["job"])){
		echo "参数错误，员工信息填写不全！";
		return;
	}
	echo "员工：".$_POST["name"]."信息保存成功！";
}
?>