ajax表单查询与写入

最新推荐文章于 2022-05-04 20:48:56 发布

qq_38674970

最新推荐文章于 2022-05-04 20:48:56 发布

阅读量511

点赞数

分类专栏： js学习

js学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            font-size: 30px;
            line-height: 1.8;
        }
    </style>
</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="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>
    <script>
        document.getElementById('search').οnclick=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.statue);
                }
               }
            }
        }

document.getElementById("save").onclick = function() { 
    var request = new XMLHttpRequest();
    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");
    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>

json

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);
}
}
}