<%@page import="todo.list.dao.TodoListDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>To Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(function(){
$("input#inputlg").keypress(function(e){
var setup=$("input#inputlg").val();
if(e.keyCode == 13){ // 13은 enter 키 코드
$("ul.list-group").append('<li class="list-group-item">'+' '+setup+'</li>');
}
});
$("a#save").click(function(){
//추후 제약 추가
$("form").submit();
});
$(document).on("click", ".list-group-item", function(){
//$('#radioD').remove($(this).unwrap().val());
//unwrap은 상위 태그 삭제
$(this).fadeOut(1000, function(){
$(this).remove();
});
});
$("#clearbtn").click(function(){
$(".list-group-item").fadeOut(1000, function(){
$(this).remove();
});
});
});
</script>
<style type="text/css">
#box {
display: inline;
}
body {
background:#d3c1ff
}
h2{
color:white;
}
#h4{
float: left;
margin:20px 0px;
color: white;
}
#button{
float: right;
}
ul {
list-style: none;
padding: 0;
margin:0;
justify-content: space-between;
align-items: center;
}
ul#uls > li.lists {
padding: 0;
margin:15px 0;
display: flex;
justify-content: space-between;
}
li.lists > h4{
color: white;
}
</style>
</head>
<body>
<div>
<div class="container">
<h2>TO DO LIST</h2>
<br>
<ul class="list-group">
<!-- 제이쿼리로 태그 생성될 곳 -->
</ul>
<div>
<ul id="uls">
<li class="lists"><h4>오늘 당신이 해야 할 일은 무엇인가요?</h4><button type="button" id="clearbtn" class="btn btn-warning">Clear</button></li>
</ul>
</div>
<form action="/web/jaeils/todolist/insertsuccess.jsp" method="get">
<input type="text" class="form-control input-lg" id="inputlg" name="setup">
<span class="button"><a href="#" id="save">등록</a></span>
</form>
</div>
</div>
</body>
</html>input에 값을 넣어 등록 버튼을 누르면 insertsuccess.jsp로 setup의 값을 전송하고 싶었는데 이해하지 못한 <jsp:usebean> 코드를 사용하려고 하다 보니 오류가 나서 null 값이 추가되어 세 시간을 삽질하다가 내가 할 줄 아는 걸로 하자는 생각에 스크립틀릿으로 작성했다.
<%@page import="todo.list.vo.TodoListVO"%>
<%@page import="todo.list.dao.TodoListDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
});
</script>
<%
request.setCharacterEncoding("UTF-8");
%>
<%
TodoListVO tl = new TodoListVO();
tl.setSetup(request.getParameter("setup"));
%>
</head>
<body>
<%
TodoListDao.getMyBatisDao().insertSetup(tl);
session.setMaxInactiveInterval(600);
//response.sendRedirect("todolist.jsp");
%>
</body>
</html>이렇게 작성하면서도 오류가 났는데 tl.setSetup(request.getParameter("setup"));을 해 주어야 하는데 엉뚱하게 작성해서였다.
request.getParameter()는 클라이언트 HTML 페이지에서 필요한 정보를 가지고 올 때 사용된다.
항상 String 타입의 값을 받아오기 때문에 정수로 받고자 한다면 변환해 주어야 한다.
request.getAttribute()는 다른 JSP나 Servlet 페이지의 변수를 가지고 올 때 사용된다.
공부한 것 정리하는 개발 입문자