【前端】Ajax+json_demo前台代码

最新推荐文章于 2021-08-30 09:12:37 发布

时雨Nicole

最新推荐文章于 2021-08-30 09:12:37 发布

阅读量658

点赞数

文章标签： ajax json jQuery

本文链接：https://blog.csdn.net/Elane1027/article/details/58347262

版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1{
font-size:20px;
line-height：1.7;
}
</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"/><br>
<button id="save">保存</button>
<p id="createResult"></p>

<script>
document.getElementById("search").οnclick=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){
//如果服务器端返回的是json语句,需要进行判断
var data = JSON.parse(request.responseText);
if(data.success){
document.getElementById("searchResult").innerHTML=data.msg;
}
else{
document.getElementById("searchResult").innerHTML="Error："+data.msg;
}
//document.getElementById("searchResult").innerHTML=request.responseText;(不是json的情况)
}
else{
alert("Error："+request.status);
}
}
}
}

document.getElementById("save").οnclick=function(){
//发送Ajax保存请求并处理,XMLHttpRequse建立连接，头文件，发送表单，并判断状态信息
var request=new XMLHttpRequest();

request.open("POST","serverjson.php");

//Post需要设置Http头信息，告诉服务器要发送表单

request.setRequestHeader("content-type","application/x=wwww-form-urlencouded");
var data="name="+document.getElementById("staffName").value+
"&number="+document.getElementById("staffNumber").value+
"&sex="+document.getElementById("staffSex").value+
"&job="+document.getElementById("staffJob").value;
request.send(data);
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
//如果服务器端返回的是json语句,需要进行判断
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById("createResult").innerHTML=data.msg;
}
else{
document.getElementById("createResult").innerHTML="Error："+data.msg;
}
//document.getElementById("createResult").innerHTML=request.responseText;
}
else{
alert("Error："+request.status);
}
}
}
}
</script>
</body>

</html>

/****************************************下为修改成jQuery实现********************/

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<style>
body, input, select, button, h1{
font-size:20px;
line-height：1.7;
}
</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"/><br>
<button id="save">保存</button>
<p id="createResult"></p>

<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js">
//百度提供的jQuery的库，直接引用，不用下载,使用jQuery来实现demo
</script>
<script>
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type:"GET",
url:"service.php?number="+$("#keyword").val(),
datatype:"json",
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}
else{
$("#searchResult").html("Error："+data.msg);
}
},
error:function(jqXHR){
alert("Error："+jqXHR.status);
}
});
});

$("#save").click(function(){
$.ajax({
type:"POST",
url:"service.php",
data:{
name:$("#staffName").val(),
number:$("#staffNumber").val(),
sex:$("#staffSex").val(),
job:$("#staffJob").val(),
},
datatype:"json",
success:function(data){
if(data.success){
$("#createResult").html(data.msg);
}
else{
$("#createResult").html("Error："+data.msg);
}
},
error:function(jqXHR){
alert("Error："+jqXHR.status);
}
});
});
});

</script>
</body>
</html>