JSP/연습

fetch써서 get방식 연습 / txt파일로 가져오는것도 포함

SEOKIHOUSE 2023. 7. 14. 12:21
  • 1) 평범한 방식 PrintWrite로 out.print

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button class="btn1" onclick="f()" value="1">1page</button>
	<button class="btn1" onclick="f()" value="2">2page</button>
	<hr>
	<p id="demo"></p>
	<script>
		function f() {
			let values = event.target.value;
			
			fetch('fetchServlet2?value='+values)
	        	.then(resp => resp.text())
	        	.then( value1 => document.getElementById("demo").innerHTML = '<img src="images/'+value1+'">')
		}
		<%--
		function f() {
			let values = event.target.value;
			
			fetch('Texttest?value='+values)
	        	.then(resp => resp.text())
	        	.then( value1 => document.getElementById("demo").innerHTML = value1)
		}
		--%>
	</script>
	
</body>
</html>
package servlets;

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

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

@WebServlet("/fetchServlet2")
public class FetchServlet2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String values = request.getParameter("value");
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		if(values.equals("1")) {
			out.print("캡처.PNG");
		}else if(values.equals("2")){
			out.print("캡처2.PNG");
		}
		
	}

}
  • 2) txt파일에 내용적어서 연결해보기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button class="btn1" onclick="f()" value="1">1page</button>
	<button class="btn1" onclick="f()" value="2">2page</button>
	<hr>
	<p id="demo"></p>
	<script>
	<%--
		function f() {
			let values = event.target.value;
			
			fetch('fetchServlet2?value='+values)
	        	.then(resp => resp.text())
	        	.then( value1 => document.getElementById("demo").innerHTML = '<img src="images/'+value1+'">')
		}
		--%>
		function f() {
			let values = event.target.value;
			
			fetch('Texttest?value='+values)
	        	.then(resp => resp.text())
	        	.then( value1 => document.getElementById("demo").innerHTML = value1)
		}
	</script>
	
</body>
</html>
package servlets;

import java.io.IOException;

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

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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String values = request.getParameter("value");
		response.setContentType("text/html;charset=utf-8");
		
		response.sendRedirect("sample" +values +".txt");
		
	}

}

sample1.txt

<img src="images/캡처.PNG">
<h1>기메진바보</h1>

sample2.txt

<img src="images/캡처2.PNG">
<h1>기메진바보</h1>
저작자표시 비영리 변경금지 (새창열림)