                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Ajax全接触

service.php代码——20170412

<?php
//设置页面内容是html编码格式是utf-8
//header("Content-Type:text/plain;charset=utf-8");
header("Content-Type:application/json;charset=utf-8");
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff=array(
    array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>"总经理"),
    array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"开发工程师"),
    array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>"产品经理"),
);
//判断如果是get请求，则进行搜索，如果是post秦秋，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if($_SERVER["REQUEST_METHOD"]=="GET"){
    search();
}elseif($_SERVER["REQUEST_METHOD"]=="POST"){
    create();
}
//通过员工编号搜索员工
function search(){
    //检查是否有员工编号的参数
    //isset检测变量是否设置；empty判断值是否为空
    //超全局变量$_GET和$_POST用于搜集表单数据
    if(!isset($_GET["number"])||empty($_GET["number"])){
        echo '{"success":false,"msg":"参数错误"}';
        return;
    }
    //函数之外声明的变量拥有global作用于，只能在函数以外进行访问
    //global关键词用于访问函数内的全局变量
    global $staff;
    //获取number参数
    $number=$_GET["number"];
    $result='{"success":false,"msg":"没有找到员工"}';
    //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
    foreach($staff as $value){
        if($value["number"]==$number){
            $result='{"success":true,"msg":"找到员工：员工编号：'.$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 '{"success":false,"msg":"参数错误，员工信息填写不全"}';
        return;
    }
    //TODO：获取post表单数据并保存到数据库

    //提示保存成功
    echo '{"success":ture,"msg":"员工：'.$_POST["name"].'信息保存成功！"}';
}
?>

aSuncat

2017-04-12

源自：Ajax全接触 4-2

关注问题我要回答

707

操作

收起

1 回答

aSuncat 提问者
2017-04-12

demo.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        *{
            font-size:30px;
            line-height:30px;
        }
    </style>
</head>
<body>
<div>
    <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="staffName"/>
    <br>
    <label>请输入员工编号：</label>
    <input type="text" id="staffNumber"/>
    <br>
    <label>请选择员工性别：</label>
    <select id="staffSex">
        <option>男</option>
        <option>女</option>
    </select>
    <br>
    <label>请输入员工职位：</label>
    <input type="text" id="staffJob"/>
    <button id="save">保存</button>
    <p id="createResult"></p>
</div>
<script>
    document.getElementById('search').onclick=function(){
        //发送ajax查询请求并处理
        var request=new XMLHttpRequest();
        request.open('GET','service.php?number='+document.getElementById('keyword').value);
        request.send();
        request.onreadystatechange=function(){
            if(request.readyState===4){
                if(request.status===200){
                    var data=JSON.parse(request.responseText);
                    if(data.success){
                        document.getElementById('searchResult').innerHTML=data.msg;
                    }else{
                        document.getElementById('searchResult').innerHTML="出现错误："+data.msg;
                    }
                }else{
                    alert('发生错误'+request.status);
                }
            }
        }
    };

    document.getElementById('save').onclick=function(){
        //发送ajax保存请求并处理
        var request=new XMLHttpRequest();
        request.open('POST','service.php');
        var data='name='+document.getElementById('staffName').value+'&number='+document.getElementById('staffNumber').value+'&sex='+document.getElementById('staffSex').value+'&job='+document.getElementById('staffJob').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){
                    var data=JSON.parse(request.responseText);
                    if(data.success){
                        document.getElementById('createResult').innerHTML=data.msg;
                    }else{
                        document.getElementById('createResult').innerHTML="出现错误："+data.msg;
                    }
                }else{
                    alert('发生错误'+request.status);
                }
            }
        }
    };
</script>
</body>
</html>