<!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: 28px;
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"></script>//引入了一个jQuery文件
<script>
$(document).ready(function(){
$("#search").click(function(){
$.ajax({ //jQuery中的ajax方法
type: "GET",
url: "service.php?number=" + $("#keyword").val(),
dataType: "json",//数据类型是json
success: function(data) {//如果成功获得了值执行的方法,目的是为了让用户知道执行的操作成功了。
if (data.success) {
$("#searchResult").html(data.msg);
} else {
$("#searchResult").html("出现错误:" + data.msg);
}
},
error: function(jqXHR){//失败后执行的方法。
alert("发生错误:" + 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",//数据类型是json
success: function(data){
if (data.success) {
$("#createResult").html(data.msg);
} else {
$("#createResult").html("出现错误:" + data.msg);
}
},
error: function(jqXHR){
alert("发生错误:" + jqXHR.status);
},
});
});
});
</script>
</body>
</html>
下图是实现成果:
jQuery中的ajax验证表单
最新推荐文章于 2024-04-13 14:35:33 发布