前端：
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/login.css" />
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#regist_container").hide();
$("#_close").show();
$("#_start").animate({
left: '350px',
height: '520px',
width: '400px'
}, 500, function() {
$("#login_container").show(500);
$("#_close").animate({
height: '40px',
width: '40px'
}, 500);
});
//打开会员登录
$("#Login_start_").click(function() {
$("#regist_container").hide();
$("#_close").show();
$("#_start").animate({
left: '350px',
height: '520px',
width: '400px'
}, 500, function() {
$("#login_container").show(500);
$("#_close").animate({
height: '40px',
width: '40px'
}, 500);
});
});
//打开会员注册
$("#Regist_start_").click(function() {
$("#login_container").hide();
$("#_close").show();
$("#_start").animate({
left: '350px',
height: '520px',
width: '400px'
}, 500, function() {
$("#regist_container").show(500);
$("#_close").animate({
height: '40px',
width: '40px'
}, 500);
});
});
//关闭
$("#_close").click(function() {
$("#_close").animate({
height: '0px',
width: '0px'
}, 500, function() {
$("#_close").hide(500);
$("#login_container").hide(500);
$("#regist_container").hide(500);
$("#_start").animate({
left: '0px',
height: '0px',
width: '0px'
}, 500);
});
});
//去 注册
$("#toRegist").click(function(){
$("#login_container").hide(500);
$("#regist_container").show(500);
});
//去 登录
$("#toLogin").click(function(){
$("#regist_container").hide(500);
$("#login_container").show(500);
});
});
</script>
</head>
<body style="background-color: #000000;">
<center>
<a id="Login_start_" class="btn btn-danger" style="width:100px;height:40px;border-radius: 0;">登录</a>
<a id="Regist_start_" class="btn btn-success" style="width:100px;height:40px;border-radius: 0;">注册</a>
</center>
<!-- 会员登录 -->
<!--<div id='Login_start' style="position: absolute;" >-->
<div id='_start'>
<div id='_close' style="display: none;">
<span class="glyphicon glyphicon-remove"></span>
</div>
<br />
<!--登录框-->
<div id="login_container">
<div id="lab1">
<span id="lab_login">会员登录</span>
<span id="lab_toRegist">
还没有账号
<span id='toRegist' style="color: #EB9316;cursor: pointer;">立即注册</span>
</span>
</div>
<div style="width:330px;">
<span id="lab_type1">手机号/账号登录</span>
</div>
<div id="form_container1">
<br/>
<form action="login.action" method="post" οnsubmit="return checkLogin()">
<input type="text" class="form-control" placeholder="手机号/用户名" id="login_number" name="login_number" value="" />
<input type="password" class="form-control" placeholder="密码" id="login_password" name="login_password"/>
<input type="submit" value="登录" class="btn btn-success" id="login_btn" />
<span id="rememberOrfindPwd">
<span>
<input id="remember" type="checkbox" style="margin-bottom: -1.5px;">
</span>
<span style="color:#000000">
记住密码
</span>
<span style="color:#000000">
忘记密码
</span>
</span>
</form>
</div>
<div style="display:block;width:330px;height：40px;">
<span id="lab_type2">使用第三方直接登陆</span>
</div>
<div style="width:330px;height:100px;border-bottom: 1px solid #FFFFFF;">
<br />
<button id="login_QQ" type="button" class="btn btn-info">
<img src="bootstrap/img/qq32.png" style="width:20px;margin-top:-4px;" /> QQ登录
</button>
<button id="login_WB" type="button" class="btn btn-danger">
<img src="bootstrap/img/sina32.png" style="width:20px;margin-top:-4px;" /> 微博登录
</button>
</div>
</div>
<!-- 会员注册 -->
<div id='regist_container' style="display: none;">
<div id="lab1">
<span id="lab_login">会员注册</span>
<span id="lab_toLogin">
已有账号
<span id='toLogin' style="color: #EB9316;cursor: pointer;">立即登录</span>
</span>
</div>
<div id="form_container2" style="padding-top: 25px;">
<form id="form2">
<input type="text" class="form-control" value="" placeholder="用户名" id="regist_account" name="regist_account">
<input type="password" class="form-control" placeholder="密码" id="regist_password1" name="regist_password1"/>
<input type="password" class="form-control" placeholder="确认密码" id="regist_password2" οnblur="checkPass()"/>
<input type="text" class="form-control" placeholder="手机号" id="regist_phone" name="regist_phone" />
<input type="text" class="form-control" placeholder="验证码" id="regist_vcode" />
<!--<button id="getVCode" type="button" class="btn btn-success" >获取验证码</button>-->
<input id="getVCode" type="button" class="btn btn-success" value="点击发送验证码" οnclick="sendCode(this)" />
</form>
</div>
<input type="button" value="注册" class="btn btn-success" id="regist_btn" />
</div>
</div>
<script>
function checkPass() {
if($("#regist_password1").val()!=$("#regist_password2").val()){
alert("两次密码输入不一样！");
$("#regist_password2").val()="";
}
}
function checkRegister(){
if($("#regist_account").val().replace(/(^\s*)|(\s*$)/g, "")==""){
alert("手机号/账号输入为空！");
return false;
}
if($("#regist_password1").val().replace(/(^\s*)|(\s*$)/g, "")==""){
alert("密码输入为空！");
return false;
}
if($("#regist_password1").val()!=$("#regist_password2").val()){
alert("两次密码输入不一样！");
return false;
}
if($("#regist_phone").val().replace(/(^\s*)|(\s*$)/g, "")==""){
alert("手机号输入为空！");
return false;
}
return true;
}
function checkLogin() {
if($("input[name='login_number']").val().replace(/(^\s*)|(\s*$)/g, "")==""){
alert("手机号/账号输入为空！");
return false;
}
if($("input[name='login_password']").val().replace(/(^\s*)|(\s*$)/g, "")==""){
alert("密码输入为空！");
return false;
}
return true;
}
</script>
<script type="text/javascript">
var clock = '';
var nums = 30;
var btn;
function sendCode(thisBtn) {
btn = thisBtn;
btn.disabled = true; //将按钮置为不可点击
btn.value = '重新获取（'+nums+'）';
clock = setInterval(doLoop, 1000); //一秒执行一次
}
function doLoop() {
nums--;
if (nums > 0) {
btn.value = '重新获取（'+nums+'）';
} else {
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = '点击发送验证码';
nums = 10; //重置时间
}
}
$(document).ready(function(){
$("#login_QQ").click(function(){
alert("暂停使用！");
});
$("#login_WB").click(function(){
alert("暂停使用！");
});
$("#regist_btn").click(function() {
var input = checkRegister();
if(input==true) {
var formParam = $("#form2").serialize();
$.ajax({
url: "register.action",
type: "post",
data: formParam,
success: function(data){
alert("hahassss");
var json = eval('(' + data + ')');;
if(json.errCode==0) {
confirm("注册成功");
location.reload(true);
}else {
alert("else");
alert(data.errInfo);
}
},
error: function(data) {
alert("haha");
alert(data);
}
});
}
});
});
</script>
</body>
</html>后端(SpringMVC)
@RequestMapping("/register")
@ResponseBody
public String register(HttpServletRequest request, HttpServletResponse response) {
Map<String,Object> result = new HashMap<String,Object>();
try{
String nickname = request.getParameter("regist_account");
String password = request.getParameter("regist_password1");
String phone = request.getParameter("regist_phone");
User user = userService.findByPhone(phone);
if(user!=null) {
result.put("errCode", 1);
result.put("errInfo", "该账号已被注册！");
return "{'errCode':1,'errInfo':'该账号已被注册！'}";
}
user = new User();
user.setNickname(nickname);
user.setPhone(phone);
user.setPassword(password);
userService.insertUser(user);
result.put("errCode", 0);
return "{'errCode':0}";
}catch(Exception e) {
result.put("errCode", 1);
result.put("errInfo", "遇到未知错误，请过段时间再试一下");
}
return "{'errCode':1,'errInfo':'遇到未知错误，请过段时间再试一下'}";
}学习点：
GET请求和POST请求只是参数放的位置不同，本质上没有任何区别，request.getParameter()都能取到。所以Ajax传递表单数据只要通过var formParam = $("#form2").serialize(); 这种序列化操作，在Action中就可以通过name拿到值了。
遇到的问题总结：
后台流程明明走的通，返回结果通过前端 的控制台（F12）查看 确报404 或者 500.
报404 错误原因 可能是 没有加 @ResponseBody 注解，导致视图解析器解析不到正确的url.
而加上后 报500错误，可能是 你返回的数据 前端解析不了（可见500就是后台代码问题），所以你要检查你 action的返回值是否能被ajax解析。像上面例子就能看出原来的action是返回 Map<String,Object> result 的，后来前端 一直走错，没办法换成了 String,果然 不再走 error function()了。
扫一扫
4477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
