[jQuery] jQuery UI slider 값을 서블릿 java 문서로 값가져오기

FRONT-END/jQuery 2020. 9. 20. 16:37

Slider | jQuery UI

Slider Drag a handle to select a numeric value. The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 jQuery UI Slider - D

jqueryui.com

사용자가 후기를 작성할때 각각의 점수를 정하도록 하고 싶어서 jQuery UI slider를 사용해보기로 했다.

내가 사용한 Slider는 Custom handle 이다.

그런데 문제가, 이 슬라이더안에 있는 값을 어떻게 서블릿으로 가져가느냐다.

혼자서 3시간동안 이것저것 실험해본 결과 javascript 와 값을 대신 전달해줄 hidden 태그로

바 안의 값을 서블릿 java 문서로 옮기는데에 성공했다.

jsp 문서

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cus_register.jsp</title>
<!--------- CDN jquery----------------------------------------------------------------->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    var handle1 = $( "#custom-handle1" );
    var hidden1 = $( "#hiddenValue1" );
    $( "#slider1" ).slider({
    	min:0,
    	max:5,
    	step:1,
        create: function() {
        handle1.text( $( this ).slider( "value" ) );
        hidden1.text( $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle1.text( ui.value );
      }
    });
    
	
    var handle2 = $( "#custom-handle2" );
    var hidden2 = $( "#hiddenValue2" );
    $( "#slider2" ).slider({
    	min:0,
    	max:5,
    	step:1,
        create: function() {
        handle2.text( $( this ).slider( "value" ) );
        hidden2.text( $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle2.text( ui.value );
      }
    });
    
    var handle3 = $( "#custom-handle3" );
    var hidden3 = $( "#hiddenValue3" );
    $( "#slider3" ).slider({
    	min:0,
    	max:5,
    	step:1,
        create: function() {
        handle3.text( $( this ).slider( "value" ) );
        hidden3.text( $( this ).slider( "value" ) );
      },
      slide: function( event, ui ) {
        handle3.text( ui.value );
      }
    });
  });
  
  function star1() {
	  var star1 = document.getElementById('custom-handle1').innerHTML;
	  document.getElementById('hiddenValue1').value = star1;
	  
	  var star2 = document.getElementById('custom-handle2').innerHTML;
	  document.getElementById('hiddenValue2').value = star2;
	  
	  var star3 = document.getElementById('custom-handle3').innerHTML;
	  document.getElementById('hiddenValue3').value = star3;
  }
  
  </script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap');
body{
    font-family: 'Noto Sans KR';
}
h1{
	margin:50px auto;
	text-align:center;
}
#STARLEVEL1, #STARLEVEL2, #STARLEVEL3, #REVIEW{
	background-color:pink;
	width:900px;
	margin:50px auto;
	font-size:20pt;
	padding:10px;
}
#slider1, #slider2, #slider3{
	width:700px;
	margin:0 auto;
}
#custom-handle1, #custom-handle2, #custom-handle3 {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
}
#div_ReviewContent{
	margin:0 auto;
	width:900px;
	text-align:center;
}
#submit_review{
	width:120px;
	
	border-radius:5px;
	border:0;
	padding:10px;
	font-size:20px;
	background-color:Cornsilk;
}
#button_lot{
	margin:50px auto;
	width:900px;
	text-align:center;
}
</style>
</head>
<body>
<jsp:include page="cus_header.jsp"></jsp:include>
<form action="/sreviewSave.do">
<h1>후기 작성하기</h1>
<div id='STARLEVEL1'>
	 이번에 참여한 동아리에 대해 얼마나 만족하시나요?
</div>
<div id="slider1">
  <div id="custom-handle1" class="ui-slider-handle"></div>
  <input type='hidden' id='hiddenValue1' name='hiddenValue1'>
</div>


<div id='STARLEVEL2'>
	이번에 참여한 동아리의 준비성은 어땠나요?
</div>
<div id="slider2">
  <div id="custom-handle2" class="ui-slider-handle"></div>
  <input type='hidden' id='hiddenValue2' name='hiddenValue2'>
</div>


<div id='STARLEVEL3'>
	이번에 참여한 동아리의 리더의 리더십은 어땠나요?
</div>
<div id="slider3">
  <div id="custom-handle3" class="ui-slider-handle"></div>
  <input type='hidden' id='hiddenValue3' name='hiddenValue3'>
</div>

<div id='REVIEW'>
	리더의 프로필에 남겨질 솔직한 후기를 남겨주세요.
</div>
<div id='div_ReviewContent'>
<textarea id='ReviewContent' name='review' cols="90" rows="4"></textarea>
</div>

<div id='button_lot'>
<input id='submit_review' type="submit" value="작성완료" onclick='star1();'>
</div>
</form>
</body>
</html>

StudentReviewSaveController 서블릿 문서

package dong.pjt.student;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import club.pjt.sql.ReviewSQL;

@WebServlet("/sreviewSave.do")
public class StudentReviewSaveController extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doUser(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doUser(request, response);
	}

	protected void doUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html; charset=UTF-8");
	  PrintWriter out = response.getWriter();
	  HttpSession session = request.getSession();
	  
	  String ID = (String) session.getAttribute("CustId");
	  String StarLevel1 = request.getParameter("hiddenValue1");
	  String StarLevel2 = request.getParameter("hiddenValue2");
	  String StarLevel3 = request.getParameter("hiddenValue3");
	  String review = request.getParameter("review");
	  
	  System.out.println("StarLevel1 : " + StarLevel1);
	  System.out.println("StarLevel2 : " + StarLevel2);
	  System.out.println("StarLevel3 : " + StarLevel3);
	  System.out.println("review : " + review);
	  
	  ReviewSQL RSQL = new ReviewSQL();
	  
	  RequestDispatcher dis = request.getRequestDispatcher("/jsp/stu_profile.jsp");
    dis.forward(request, response);
	}
}

이렇게 하면 값이 잘 옮겨진다.

작성 완료를 누른 후 콘솔 내용

이 부분에 대한 관련 자료가 없어서 너무 힘들었다ㅠㅠㅠ

간절하게 찾고계신분께 도움되길 바라는 마음에서 작성해본다ㅎㅎ

'FRONT-END > jQuery' 카테고리의 다른 글

[jQuery] 댓글 수정 함수 구현하기 (0)	2020.10.29
[jQuery] jQuery 를 이용해 checkbox, radio 에 checked 속성 넣기 (0)	2020.10.14

ABOUT ME

개발 일지

'FRONT-END > jQuery' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'FRONT-END > jQuery' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바