用JavaWeb开发登录功能使用学习ajax+jquery遇到点麻烦，在线等求解
UserServlet代码
public class UserServlet extends BaseServlet {
/**
* 登录的功能
*/
public String login(HttpServletRequest req, HttpServletResponse resp) {
// 7.验证码验证
// 7.1获取验证码
String code = req.getParameter("code");
// 7.2获取生成的验证码
String rand = req.getSession().getAttribute("IdentifyCode").toString();
// 8.检查验证码
if (code != null && !code.trim().equals("")) {
if (!code.equalsIgnoreCase(rand)) {
try {
resp.getWriter().write("codeFalse");
} catch (IOException e) {
e.printStackTrace();
}
} else {
// 1.接收数据
Map<String, String[]> map = req.getParameterMap();
User user = new User();
System.out.println("获取数据：-------" + map);
// 2.封装数据
try {
BeanUtils.populate(user, map);
// 3.调用Service层处理数据
UserService us = new UserService();
User existUser = us.login(user);
System.out.println("=======existUser========" + existUser);
if (existUser == null) {
// 用户登录失败
// req.setAttribute("msg", "用户名或密码错误!");
resp.getWriter().write("LoginFail");
// "/login/login2.jsp"
} else {
req.getSession().setAttribute("existUser", existUser);
System.out.println("------用户登录成功！！！！！-------");
resp.getWriter().write("LoginSuc");
}
} catch (Exception e) {
e.printStackTrace();
}
}
return null;
}
return null;
}
}jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>登陆操作</title>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<link rel="stylesheet" type="text/css" href="Styles/base.css" />
<link rel="stylesheet" type="text/css" href="Styles/admin-all.css" />
<link rel="stylesheet" type="text/css" href="Styles/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="Styles/login.css" />
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.spritely-0.6.js"></script>
<script type="text/javascript" src="Scripts/chur.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache:false});//清楚ajax
//刷新验证码
$("#randCode,#randCode2").click(function(e){
$("#randCode").attr("src","RandCodeServlet?t="+new Date().getTime());
//阻止超链接默认行为
e.preventDefault();
});
</script>
</head>
<body>
<div id="clouds" class="stage"></div>
<div class="loginmain"></div>
<div class="row-fluid">
<form name="form1" method="post"
action="${pageContext.request.contextPath }/user">
<input type="hidden" name="method" value="login" />
<h1>聊 天 系 统</h1>
<p>
<label>帐 号：<input type="text" id="username"
name="username" /> </label>
</p>
<p>
<label>密 码：<input type="password"
id="password" name="password" /> </label>
</p>
<p class="pcode">
<label> 验 证 码：<input
type="text" id="txtCode" name="code" maxlength="4" class="code" />
<img id="randCode" src="RandCodeServlet" title="看不清换一张"
class="imgcode" /> <a id="randCode2" href="RandCodeServlet">换一张</a>
</label>
</p>
<p class="tip" id="divMsg"> </p>
<hr />
<input id="submit" type="submit" value=" 登 录 "
class="btn btn-primary btn-large login" /> <input
id="button2" type="button" value=" 注 册 " class="btn btn-large" />
</form>
</div>
</body>
</html>
<script>
</script>想用ajax+jquery对登录检验，登陆成功，登陆失败，账号密码验证码不能为空的检查，然后显示在页面上的<p class="tip" id="divMsg"> </p>位置
以下是自己写的ajax+jquery的代码，可是无法实现，有人帮我修改一下吗？？
//登陆的业务操作
$("#submit").click(function(){
var name=$("#username").val();
var pass=$("#password").val();
var code=$("#txtCode").val();
alert("name="+name+"pass"+pass+"code"+code);
if(name!="" && pass!="" && code!=""){
//发出ajax请求
$.ajax({
type:"post",
url:"${pageContext.request.contextPath }/user?method=login",
data:"action=Login&d="+(new Date()).valueOf()+"&name="+name+"&pass="+pass+"&code"+code,
success:function(responseText){
alert("--------"+data+"--------");
if(responseText=="LoginSuc"){
$("#divMsg").show().html("登陆成功！");
//登陆按钮变色
$("#submit").attr("disabled","disabled");
window.location="chatRoom.jsp";
}else if(responseText=="LoginFail"){
//登陆失败
$("#divMsg").show().html("登陆失败，请重新登陆！");
return false;
}else if(responseText=="codeFalse"){
$("#divMsg").show().html("验证码错误！");
return false;
}else if(responseText=="LoginNot"){
$("#divMsg").show().html("你已经登陆过了");
return false;
}
},
error:function(xmlHttpReq){
$("#divMsg").show().html("网络故障："+xmlHttpReq.status);
}
});
}else{
if(name=""){
$("#divMsg").show().html("账号不能为空");
return false;
}
if(pass=""){
$("#divMsg").show().html("密码不能为空");
return false;
}
if(code=""){
$("#divMsg").show().html("验证码不能为空");
return false;
}
}
});
});等求解，谢谢谢谢！！！
等求解，谢谢谢谢！！！
等求解，谢谢谢谢！！！
慕粉3505864浏览 2708回答 1
1回答
-
堂堂堂堂糖糖糖童鞋
既然是ajax提交表单，就不需要再form标签中指定action了，简单改了一下js代码：$(function () { $('#submit').on('click', function () { var name=$("#username").val(); var pass=$("#password").val(); var code=$("#txtCode").val(); function validateForm () { if (!name) { $('#divMsg').text('账号不能为空').show(); return false } else if (!pass) { $('#divMsg').text('密码不能为空').show(); return false } else if (!code) { $('#divMsg').text('验证码不能为空').show(); return false } return true } if (validateForm()) { // 校验通过 $('#divMsg').text('').hide(); // 清空信息 // 发送ajax请求 alert('发送ajax'); } }) })
随时随地看视频慕课网APP
相关分类
Java
JavaScript
JQuery