侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

php+ajax简单实现信息添加和查询

2024-05-05 星期日 / 0 评论 / 0 点赞 / 42 阅读 / 9404 字

//server.php 服务端代码 <?php header("Content-Type:text/plain;charset=utf-8"); //多维数组 $staff = array (

//server.php 服务端代码

<?php
    header("Content-Type:text/plain;charset=utf-8");
    //多维数组
    $staff = array (
        array("name" => "wanguanna","number" => "1","sex" =>"男","job" => "总经理"),
        array("name" => "wanguanna","number" => "2","sex" =>"男","job" => "付经理"),
        array("name" => "wanguanna","number" => "3","sex" =>"女","job" => "员工")
    );
    //请求的判断,$_超全局变量的开头,不适用global关键字
    if($_SERVER['REQUEST_METHOD'] == 'GET'){
            search();
    }else if($_SERVER['REQUEST_METHOD'] =='POST'){
            create();    
    }
    //检查是否有员工编号的参数
    function search(){
            if(!isset($_GET['number']) || empty($_GET['number'])){
                    echo "参数错误";
                    return;
                }
            global $staff;
            //获取number参数
            $number = $_GET['number'];
            $result = "没有找到员工";
            
            //遍历$staff多维数组,查找key值为number的员工是否存在
            foreach($staff as $value){
                    if($value["number"] == $number){
                            $result = "找到员工:员工编号:".$value["number"].",员工姓名:".$value["name"].",员工性别:".$value["sex"].",员工职位:".$value["job"];
                            break;
                        }
                }
            echo $result;
        }
    //创建员工
    function create(){
            //判断信息是否填写完成
            if(!isset($_POST["name"]) || empty($_POST["name"]) ||
               !isset($_POST["number"]) || empty($_POST["number"]) ||
               !isset($_POST["sex"]) || empty($_POST["sex"]) ||
               !isset($_POST["job"]) || empty($_POST["job"])
            
            ){
                
                echo "参数错误,员工信息填写不全";
                return;
            }
            
            echo "员工:".$_POST["name"]."信息保存成功";
            
        }
    
?>

 

//客户端html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<h1>员工查询</h1>
<label>请输入员工编号</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>添加员工</h1>
<label>请输入员工姓名</label>
<input type="text" id="name"><br/>
<label>请输入员工编号</label>
<input type="text" id="number"><br/>
<label>请输入员工性别</label>
<select id="sex"><br/>
    <option>
        男
    </option>
    <option>
        女
    </option>
</select><br/>
<label>请输入员工职位</label>
<input type="text" id="job"><br/>
<button id="save">添加</button><br/>
<p id="createResult"></p>

<script>
//查询请求绑定事件
    document.getElementById("search").onclick = function(){
        //发送查询请求并处理
        var request = new XMLHttpRequest();
        request.open("GET","server.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("save").onclick = function(){
        var request = new XMLHttpRequest();
        request.open("POST","server.php");
        var data = "name="+document.getElementById("name").value+"&number="+document.getElementById("number").value+"&sex="+document.getElementById("sex").value+"&job="+document.getElementById("job").value;
        //必须要设置setRequestHeader()方法,否则不成功
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        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>
</body>
</html>

 

广告 广告

评论区