您的位置：首页 > 理论基础 > 计算机网络

Ajax实例:实现查找员工和新建员工，利用XMLHttpRequest对象实现前后端交互

2017-01-18 20:31 716 查看

Ajax技术的核心是XMLHttpRequest对象，这个对象充当着前端语言和后台服务器语言(php)的桥梁的角色，JavaScript通过这个对象可以向服务器发送请求request.open(method,url,async),request.send()，也可以处理来自服务器的响应(）。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
* {
font-family: "微软雅黑";
font-size: 20px;
line-height: 50px;
}
</style>
</head>

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

<h1>员工新建</h1>
<label>请输入员工姓名</label>
<input type="text" name="" id="staffName" value="" /><br />
<label>请输入员工编号</label>
<input type="text" name="" id="staffNumber" value="" /><br />
<label>请选择员工性别</label>
<select id="staffSex">
<option>男</option>
<option>女</option>
</select><br />
<label>请输入员工职位</label>
<input type="text" name="" id="staffJob" value="" /><br />
<button id="save">保存</button>
<p id="createResult"></p>

<script type="text/javascript">
document.getElementById("search").onclick = function() {
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
request.open("GET", "service.php?number=" + document.getElementById("keyword").value);
//GET的参数要写在URL中，不在send中写
request.send();
request.onreadystatechange = function() {
if(request.readyState === 4) { //readyState为4表明服务器请求已结束
if(request.status === 200) { //判断请求是否成功
var data = JSON.parse(request.responseText);
if(data.success) {//data.success和data.msg都是JSON对象里的值

document.getElementById("searchResult").innerHTML = data.msg;
} else {
document.getElementById("searchResult").innerHTML = "出现错误" + data.msg;
}

} else {
alert("发生错误:" + request.status + request.statusText);
}
}
}
}
document.getElementById("save").onclick = function() {
//发送Ajax查询请求并处理
var request = new XMLHttpRequest();
request.open("POST", "service.php");
//POST的参数要写在send中
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) { //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 + request.statusText); }
}
}
}
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航