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>