ajax前台页面以及交互

ajax前台页面以及交互

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ZERO</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#regist").bind('click',register);
});
function register(){
var name = $("#name").attr('value');//拿到name
var password = $("#password").attr('value');//拿到password
var repassword = $("#repassword").attr('value');//拿到repassword
//判断3个值是否符合函数validate，即都不为空，且password和respassword是否一致
if(validate(name,password,repassword)){
$.ajax({
url: "ajaxdemo", 请求的servlet注解
dataType : "json", json格式
type: "post", post请求
data: {"name":name,"password":password},
success:function(data){
alert(data.demo); //成功则提示data.demo
},
error: function() {
alert("ajax执行失败"); //失败则提示ajax执行失败
}
});
}
}
/* 验证方法 */
function validate(name,password,repassword){
if(name==null || name==''){
alert('用户名不能为空！');
$("#name").focus();
return false;
}
if(password==null || password==''){
alert('密码不能为空！');
$("#password").focus();
return false;
}
if(repassword==null || repassword==''){
alert('确认密码不能为空！');
$("#repassword").focus();
return false;
}else if(password != repassword){
alert('两次密码输入不一致！');
$("#repassword").focus();
return false;
}
return true;
}
</script>
<style type="text/css">
.demo {width:250px;height:40px;display:none; }
</style>
<body>
<div id="content">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td>密　　码：</td>
<td>
<input type="password" name="password" id="password"/>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="repassword" id="repassword"/>
</td>
</tr>
<tr>
<td colspan="2" align="CENTER">
<BR><input type="button" id="regist" value="注册"/>
</td>
</tr>
</table>
</div>
</body>
</html>

ajax前台页面以及交互

猜你喜欢