5、post请求

html

<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" /><br>
<button id="save">保存</button>
<p id="createResult"></p>

js

document.getElementById("save").onclick = function() {

　　　　　　　　var request = null;
　　　　　　try{
　　　　　　　　request = new XMLHttpRequest();
　　　　　　　　} catch(e){
　　　　　　   request = new ActiveXObject('Microsoft.XMLHTTP');
　　　　　　}

        request.open("POST", "server.php");
    var data = "name=" + document.getElementById("staffName").value 
                      + "&number=" + document.getElementById("staffNumber").value 
                      + "&sex=" + document.getElementById("staffSex").value 
                      + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //post请求得要这个
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("createResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    };
        request.send(data);
}

php

<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); 

if ($_SERVER["REQUEST_METHOD"] == "POST"){
    create();
}

 
//创建员工
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;
    }
    //TODO: 获取POST表单数据并保存到数据库
    
    //提示保存成功
    echo "员工：" . $_POST["name"] . " 信息保存成功！";
}
?>