ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 22-09-07_jsp(2)
      main 2022. 9. 7. 16:55

      이거에따라서
      이거가 바뀔거라는데

      저 데이터타입 저놈은....

      dataType:"xml/json", //request (Accept) | response (Content-Type)

       

      request에서는 accept header랑 연광있고...response에서는 Content-Type이랑 연관있다고...

       

      --------

      <input type="radio" name="sendDataType">JSON
      <input type="radio" name="sendDataType">Parameter
      <hr />
      <input type="radio" name="receiveDataType">XML
      <input type="radio" name="receiveDataType">JSON

      ----

       contentType:"application/json; charset=utf-8",

      -----

       

       

       

      쌤코드일단복사..

      <%@page import="kr.or.ddit.enumpkg.OperatorType"%>
<%@ 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>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.1.min.js"></script>
<body>
<!-- 이항 연산자로 4칙 연산 처리. -->
<input type="radio" name="sendDataType" value="json" checked>JSON
<input type="radio" name="sendDataType" value="parameter">Parameter
<hr />
<input type="radio" name="receiveDataType" value="xml">XML
<input type="radio" name="receiveDataType" value="json" checked>JSON

<form action="<%=request.getContextPath()%>/calculate" method="post" name="calForm">
   <input type="number" name="leftOp" />
   <select name="operator">
      <%
         for(OperatorType single: OperatorType.values()){%>
            <option value = '<%=single.name()%>'><%=single.getSign()%></option>
         <%}
      %>
   </select>
   <input type="number" name="rightOp" />
   <input type="submit" value="=">
</form>
<div id="result"></div>

<script>
   let calForm =$(document.calForm).on("submit", function(event){
      event.preventDefault();
      
      let url = this.action;
      let method = this.method;
      //let data = $(this).serialize(); //QueryString
      /*
      let jsObj =   {
            leftOp:23,
            rightOp:34,
            operator: "PLUS"
            };
      */
      
      //아악
      let jsObj =   {
    	   leftOp:document.getElementsByName("leftOp")[0]. value
    	   ,
           rightOp:document.getElementsByName("rightOp")[0]. value
           ,
           operator: document.getElementsByName("operator")[0]. value
            };
       
      let json = JSON.stringify(jsObj);
      
      
      $.ajax({
         url:url,
         method:method,
         contentType:"application/json; charset=utf-8",
         data: json,
         dataType:"xml/json", //request (Accept) | response (Content-Type)
         success:function(resp){
            console.log(resp);
            calForm.after(resp.expression);
            //$('#result').append(resp.expression);
         },
         error: function(errorResp){
            console.log(errorResp.status);
         }
      });
      return false;
   });
</script>
</body>
</html>

       

       

      ----

       

      뭔가 하고있는데 이게 무슨소리임
      아 무슨소린가 했더니 이렇게 다양하게 표현하는데, 같은 값이 나오는 경우들에 대해 말함..

       

       

      ==

      <%@page import="kr.or.ddit.enumpkg.OperatorType"%>
<%@ 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>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.1.min.js"></script>
<body>
<!-- 이항 연산자로 4칙 연산 처리. -->
<input type="radio" name="sendDataType" value="json" checked>JSON
<input type="radio" name="sendDataType" value="parameter">Parameter
<hr />
<input type="radio" name="receiveDataType" value="xml">XML
<input type="radio" name="receiveDataType" value="json" checked>JSON

<form action="<%=request.getContextPath()%>/calculate" method="post" name="calForm">
   <input type="number" name="leftOp" />
   <select name="operator">
      <%
         for(OperatorType single: OperatorType.values()){%>
            <option value = '<%=single.name()%>'><%=single.getSign()%></option>
         <%}
      %>
   </select>
   <input type="number" name="rightOp" />
   <input type="submit" value="=">
</form>
<div id="result"></div>

<script>
	let makeSendData = function(settings){
		let inputs = calForm.find(":input");
		let data ={};
		$.each(inputs, function(index, input){
			let name = this.name;
			let value = $(this).val();
			let type = this.type;
//			data.leftObj =23;
//			data['leftObj']=23;
			if(type=='number'){
				data[name] = parseInt(value);
			}else{
				data[name] = value;
			}
		
		});
		console.log(data);
			//여기까지는 data가 javascript nature data였는데
		let sendDataType = $("[name=sendDataType]:checked").val();
		if(sendDataType == 'json'){
			settings.data = JSON.stringify(data);
			//여기선 데이터가 JSON data가 됨
			settings.contentType = "application/json;charset=UTF-8";
		}else{
			settings.data = data;
		}
	}

	let makeReceiveDataType = function(settings){
		
	}

   let calForm =$(document.calForm).on("submit", function(event){
      event.preventDefault();
      
      let url = this.action;
      let method = this.method;
      //let data = $(this).serialize(); //QueryString
      /*
      let leftOp = $("input[name=leftOp]",document.calForm).val
	  let rightOp = $("input[name=rightOp]",document.calForm).val
	  let operator = $("input[name=operator]",document.calForm).val
      
      let jsObj =   {
            leftOp,
            rightOp,
            operator
            };

      let json = JSON.stringify(jsObj);
		*/      
      let settings ={
    		 url:url,
   	         method:method,
   	         success:function(resp){
   	        	console.log(resp);
   	            calForm.after(resp.expression);
   	         },
   	         error: function(errorResp){
   	            console.log(errorResp.status);
   	         }
      };
      
      makeSendData(settings);
      
      makeReceiveDataType(settings);
      
      
      $.ajax(settings);
      return false;
   });
</script>
</body>
</html>

      ==

       

       

      json/json 하면 content-type 저렇게 나오고

       

      parameter로 바꾸면 저렇게 또 바뀜

      let makeReceiveDataType = function(settings){
		let receiveDataType = $("[name=receiveDataType]:checked").val();
		let dataType = receiveDataType;
		settings.dataType = dataType;
	}

      이 코드를 수정해서 넣어주고

       

      실행하면

       

       

      여기에 Accept랑 Content -tpye 보면 다른걸 알수있음

       

      이릏게 됨

       

      이건 이제 서버에서 감당할 수 있는 구조는 json / json 뿐임... 그래서 잘못 맞추면 405 status code가 나오는거지...

       

       

      이새기는 이제 request의body에 MIME을 돌려준대

       

       

      난 json 아니면 감당못해뜻
      200을 가지고있거나 아니면 뭔가 이상한걸 갖고있는경우 감당못하는

       

       

      <%@page import="kr.or.ddit.enumpkg.OperatorType"%>
<%@ 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>
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-3.6.1.min.js"></script>
<body>
<!-- 이항 연산자로 4칙 연산 처리. -->
Send Data Type
<input type="radio" name="sendDataType" value="json" checked>JSON
<input type="radio" name="sendDataType" value="parameter">Parameter
<hr />
Receive Data Type
<input type="radio" name="receiveDataType" value="xml">XML
<input type="radio" name="receiveDataType" value="json" checked>JSON

<form action="<%=request.getContextPath()%>/calculate" method="post" name="calForm">
   <input type="number" name="leftOp" />
   <select name="operator">
      <%
         for(OperatorType single: OperatorType.values()){%>
            <option value = '<%=single.name()%>'><%=single.getSign()%></option>
         <%}
      %>
   </select>
   <input type="number" name="rightOp" />
   <input type="submit" value="=">
</form>
<div id="result"></div>

<script>
	let makeSendData = function(settings){
		let inputs = calForm.find(":input[name]");
		let data ={};
		$.each(inputs, function(index, input){
			let name = this.name;
			let value = $(this).val();
			let type = this.type;
//			data.leftObj =23;
//			data['leftObj']=23;
			if(type=='number'){
				data[name] = parseInt(value);
			}else{
				data[name] = value;
			}
		
		});
		console.log(data);
			//여기까지는 data가 javascript nature data였는데
		let sendDataType = $("[name=sendDataType]:checked").val();
		if(sendDataType == 'json'){
			settings.data = JSON.stringify(data);
			//여기선 데이터가 JSON data가 됨
			settings.contentType = "application/json;charset=UTF-8";
		}else{
			settings.data = data;
		}
	}

	let makeReceiveDataType = function(settings){
		let receiveDataType = $("[name=receiveDataType]:checked").val();
		let dataType = receiveDataType;
		settings.dataType = dataType;
	}

   let calForm =$(document.calForm).on("submit", function(event){
      event.preventDefault();
      
      let url = this.action;
      let method = this.method;
      //let data = $(this).serialize(); //QueryString
      /*
      let leftOp = $("input[name=leftOp]",document.calForm).val
	  let rightOp = $("input[name=rightOp]",document.calForm).val
	  let operator = $("input[name=operator]",document.calForm).val
      
      let jsObj =   {
            leftOp,
            rightOp,
            operator
            };

      let json = JSON.stringify(jsObj);
		*/      
      let settings ={
    		 url:url,
   	         method:method,
   	         success:function(resp){
   	        	console.log(resp);
   	            calForm.after(resp.expression);
   	         },
   	         error: function(errorResp){
//   	        console.log(errorResp.status);
   	            alert(errorResp.status);
   	         }
      };
      
      makeSendData(settings);
      
      makeReceiveDataType(settings);
      
      
      $.ajax(settings);
      return false;
   });
</script>
</body>
</html>

      이건 calculateForm.jsp

       

      package kr.or.ddit.servlet03;

import java.io.IOException;
import java.io.InputStream;
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;

import com.fasterxml.jackson.databind.ObjectMapper;

import kr.or.ddit.enumpkg.OperatorType;
import kr.or.ddit.vo.CalculateVO;

@WebServlet("/calculate")
public class CalculateServlet extends HttpServlet{
   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      
      int statusCode = HttpServletResponse.SC_OK;
      String bodyContentType = req.getContentType();
      if(!bodyContentType.contains("json")) {
         statusCode = HttpServletResponse.SC_UNSUPPORTED_MEDIA_TYPE;
      }
      String accept = req.getHeader("Accept");
      if(statusCode==200 && !accept.contains("json")) {
         statusCode = HttpServletResponse.SC_NOT_ACCEPTABLE;
      }
      if(statusCode==HttpServletResponse.SC_OK) {
         
         resp.setContentType("application/json;charset=UTF-8");
         
         try(
               InputStream is = req.getInputStream();
               PrintWriter out = resp.getWriter();
               ){
            ObjectMapper mapper = new ObjectMapper();
            CalculateVO vo = mapper.readValue(is, CalculateVO.class);
            
            mapper.writeValue(out, vo);
         }
      }else {
         resp.sendError(statusCode);
      }
   }
   
   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      String left = req.getParameter("leftOp");
      String right = req.getParameter("rightOp");
      
       String opParam = req.getParameter("operator");
       
       int statusCode = HttpServletResponse.SC_OK;
       OperatorType operatorType = null;
       try {
          operatorType = OperatorType.valueOf(opParam);
       }catch (Exception e) {
          statusCode = HttpServletResponse.SC_BAD_REQUEST;
      }
      
      if(
         left==null || left.isEmpty() || !left.matches("\\d+")
         || right==null || right.isEmpty() || !right.matches("\\d+")   
      ) {
         statusCode = HttpServletResponse.SC_BAD_REQUEST;
      }
      
      
      if(statusCode==HttpServletResponse.SC_OK) {
         int leftOp = Integer.parseInt(left);
         int rightOp = Integer.parseInt(right);
         
          String expression = operatorType.getExpression(leftOp, rightOp);
         
          try(
             PrintWriter out = resp.getWriter();   
          ){
             out.println(expression);
          }
          
      }else {
         resp.sendError(statusCode);
      }
   }
}

      이릏게만 해두면 415 에러가 나고요

       

      이렇게요

       

      잘모르겠지만

      [name]을 추가해주면 된다고함.

      ---

       

      xml을 marshalling 하기 위해서..

      이 세놈들 끌고옵니다
      저 lib에...

       

      'main' 카테고리의 다른 글

      22-09-07_jsp(4)  (0) 2022.09.07
      22-09-07_jsp(3)_과제있음  (0) 2022.09.07
      22-09-07_jsp(1)  (0) 2022.09.07
      22-08-29_python  (0) 2022.09.06
      22-09-06_jsp  (1) 2022.09.06

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바