我是一名刚刚学习Ajax的学生。
我一直很担心，但一直没能解决问题。
所以，我想从你那里得到一些建议。
首先，我将展示 loginPage.jsp 代码、MemberController.java 代码和 MemberService.java 代码。
这是loginPage.jsp代码。
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!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=EUC-KR">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/loginPage.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/swiper.jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<jsp:include page="header.jsp" />
<div class="loginPage_main">
<div class="pageName">
<img class="pageName_image" src="images/greeting_title.jpg">
<div class="pageName_explanation">
<p>로그인</p>
</div>
</div>
<div class="location">
</div>
<div class="loginForm_area">
<div class="hidden_area">
<div class="img_lock_area">
<img src="images/lock.png" class="img_lock">
</div>
<form action="loginOK.do" id="login_frm" name="frm" method="post" onsubmit="return checkValue()">
<div class="input_zone">
<div class="input_id">
<span> ID</span><input type="text" placeholder="아이디를 입력하세요" style="width:280px;margin-left: 10px;" name="id">
</div>
<div class="input_pw">
<span>PW</span><input type="password" placeholder="비밀번호를 입력하세요" style="width:280px;margin-left: 10px;" name="pw">
</div>
</div>
</form>
<div class="loginBtn" onclick="document.getElementById('login_frm').onsubmit();">
<div style="margin-top: 22px;">
<span class="loginOK">Login</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function checkValue()
{
var form = document.frm;
if(!form.id.value || !form.pw.value)
{
alert('아이디 혹은 비밀번호를 입력하세요.');
return false;
}
$.ajax
({
type: 'POST',
url: 'loginOK.do',
success: function()
{
alert('success');
},
error: function()
{
alert('error');
}
})
}
</script>
</body>
</html>
这是MemberController.java代码。
package controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import service.MemberService;
@Controller
public class MemberController
{
@Autowired
public MemberService mService;
// 로그인
// 전송된 ID,PW값과 DB에 있는 ID,PW값 비교
// 맞으면 alert 창으로 " 로그인 성공 " 메세지 표출 + mainPage 이동
// 틀리다면 alert 창으로 " 로그인 실패 " 메세지 표출 + loginPage로 리다이렉트
@RequestMapping("loginOK.do")
public String login(String id, String pw,HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException
{
HashMap<String, Object> loginIdentify = mService.login(id,pw);
System.out.println("ID is : " + id + " / " + "PW is : " + pw);
if(loginIdentify != null)
{
System.out.println("loginIdentify is true : " + loginIdentify);
session.setAttribute("id", id);
session.setAttribute("pw", pw);
/*
- 오류로 인한 일시 보류 -
response.setCharacterEncoding("UTF-8");
PrintWriter writer = response.getWriter();
writer.println("<script type='text/javascript'>");
writer.println("alert('로그인 성공!');");
writer.println("</script>");
writer.flush();
*/
}
else
{
System.out.println("loginIdentify is false : " + loginIdentify);
/*
- 오류로 인한 일시 보류 -
response.setCharacterEncoding("UTF-8");
PrintWriter writer = response.getWriter();
writer.println("<script type='text/javascript'>");
writer.println("alert('로그인 실패!');");
writer.println("</script>");
writer.flush();
*/
return "redirect:move_loginPage.do";
}
return "redirect:main.do";
}
// 로그아웃
// 세션과 쿠키 제거 + mainPage로 리다이렉트
@RequestMapping("logout.do")
public String logout(HttpSession session, HttpServletResponse response)
{
session.removeAttribute("id");
Cookie cookie = new Cookie("id", null);
cookie.setMaxAge(0);
response.addCookie(cookie);
// 세션 삭제 확인
System.out.println("session is delete It's really? : " + session.getAttribute("id"));
return "redirect:main.do";
}
}
这是MemberService.java代码。
package service;
import java.util.HashMap;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import org.springframework.stereotype.Service;
import dao.IMemberDAO;
import model.Member;
@Service
public class MemberService
{
@Autowired
private IMemberDAO memberDao;
public HashMap<String, Object> login(String id,String pw)
{
HashMap<String, Object> result = memberDao.selectOne(id);
System.out.println(result);
if(result != null)
{
String opwd = (String) result.get("pw");
if(opwd.equals(pw))
{
return result;
}
else
{
return null;
}
}
else
{
return null;
}
}
}
执行表单标签时，将输入的 ID 值和 PW 值与 DB 中存储的 ID 值和 PW 值进行比较。
如果值匹配，则转到主页。
如果值不匹配，您将无法在不重新加载页面的情况下登录!我想打印一条消息。我怎样才能让它按照我想要的方式工作？
我不知道从哪里开始......我非常需要你的帮助。 请告诉我你的计划。
最佳答案
你就快到了。
取消注释 MemberController.java 中使用 response 将数据发送回客户端 JavaScript 的代码。类似的东西——
PrintWriter writer = response.getWriter();
writer.println("login succeeded");
writer.flush();
——失败案例也类似。
然后，在 loginPage.jsp 中，读取 $.ajax 中的第一个参数。的 success 函数来获取相同的数据:
$.ajax
({
type: 'POST',
url: 'loginOK.do',
success: function(returnData)
{
console.log(returnData); // <---
},
error: function()
{
alert('error');
}
})
这样，客户端就会知道登录是否成功，并且您可以调用适当的 JavaScript 函数来打开不同的页面、显示错误、清除密码框或任何您想做的事情。
<小时/>切向应用程序安全批评:
- 我希望您使用的是 HTTPS。否则，用户凭据很容易被攻击者窃取。
- 您似乎正在将用户的密码以纯文本形式存储在数据库中。考虑salting当您的数据库受到威胁时，它们可以保护它们。
关于javascript - 如何使用 Ajax 检查登录情况？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45469504/