본문 바로가기
JQuery/연습

이클립스에서 jquery로 ajax써보기 + 자바스크립트랑 비교

by SEOKIHOUSE 2023. 7. 5.

그래서 제이쿼리는 걍 보내도 되는가보다

이렇게 쿼리스트링으로 보내도 된다

자바스크립트는 이렇게 변환해줘야하는데;;

<%@ 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>
	<script src="js/jquery-3.7.0.js"></script>
</head>
<body>
	<input type="text" name="txt" value="xxx">
	<input type="text" name="txt2" value="xxx">
	<button onclick="run()">실행</button>
	<button onclick="runs()">실행2</button>
	<hr>
	<div id="demo">here...data</div>
	
	<script>
		function run() {
			$.ajax({
				url: "jqueryAjax",
				type: "GET",
				dataType: "text",
				<%-- 
				data : "msg="+$("input[name=txt]").val()+"&msg2="+$("input[name=txt2]").val(),
				--%>
				 
				data: {
					msg: $("input[name=txt]").val(),
					msg2: $("input[name=txt2]").val(),
					
					},
					
				success: function(response) {
					let getData = JSON.parse(response);
					$("#demo").html(getData.msg1 + getData.msg2);
				}
			});
		}
	</script>
	<script>
		function runs() {
			const xhttp = new XMLHttpRequest();
			let msg1 = document.querySelector("input[name=txt]").value;
			let msg2 = document.querySelector("input[name=txt2]").value;
			let a = {
				msg : msg1,
				msg2 : msg2
			}
			let data = JSON.stringify(a);
			xhttp.onload = function() {
				let getData = JSON.parse(this.responseText);
				$("#demo").html(getData.msg1 + getData.msg2);
			}
			xhttp.open("POST","jqueryAjax",true);
			xhttp.setRequestHeader("Content-type", "application/json");
			xhttp.send(data);
		}
	</script>
</body>
</html>
package servlet;

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

import org.json.JSONObject;

import vo.Message;

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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		String data = request.getParameter("msg");
		String data2 = request.getParameter("msg2");
		PrintWriter out = response.getWriter();
		
		Message msg = new Message(data, data2);
		JSONObject jobj = new JSONObject(msg);
		
		out.print(jobj);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		BufferedReader br = request.getReader();
		String jstr = br.readLine();
		System.out.println(jstr);
		
		JSONObject jobj1 = new JSONObject(jstr);
		System.out.println(jobj1);
		PrintWriter out = response.getWriter();
		String data = jobj1.getString("msg");
		String data2 = jobj1.getString("msg2");
		
		Message msg = new Message(data, data2);
		JSONObject jobj = new JSONObject(msg);
		
		out.print(jobj);
	}

}
package vo;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class Message {
	private String msg1;
	private String msg2;
}
  • sample클래스를 만들어서 다르게 활용하기

console.log(response)값
결과값

<%@ 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>
	<script src="js/jquery-3.7.0.js"></script>
</head>
<body>
	<input type="text" name="txt" value="xxx">
	<input type="text" name="txt2" value="xxx">
	<button onclick="run()">실행</button>
	<button onclick="runs()">실행2</button>
	<hr>
	<div id="demo">here...data</div>
	
	<script>
		function run() {
			$.ajax({
				url: "jqueryAjax",
				type: "GET",
				dataType: "text",
				<%-- 
				data : "msg="+$("input[name=txt]").val()+"&msg2="+$("input[name=txt2]").val(),
				--%>
				 
				data: {
					msg: $("input[name=txt]").val(),
					msg2: $("input[name=txt2]").val(),
					
					},
					
				success: function(response) {
					console.log(response);
					let getData = JSON.parse(response);
					
					let hoby = "";
					for(var i =0; i<getData.hobbies.length; i++) {
						hoby += getData.hobbies[i];
					}
					let msg = getData.message.msg1+getData.message.msg2;
					$("#demo").html("취미들:"+ hoby+"<br>이름:"+getData.name+"<br>메시지:"+msg);
					<%--
					$("#demo").html(getData.msg1 + getData.msg2);
					--%>
				}
			});
		}
	</script>
	<script>
		function runs() {
			const xhttp = new XMLHttpRequest();
			let msg1 = document.querySelector("input[name=txt]").value;
			let msg2 = document.querySelector("input[name=txt2]").value;
			let a = {
				msg : msg1,
				msg2 : msg2
			}
			let data = JSON.stringify(a);
			xhttp.onload = function() {
				let getData = JSON.parse(this.responseText);
				$("#demo").html(getData.msg1 + getData.msg2);
			}
			xhttp.open("POST","jqueryAjax",true);
			xhttp.setRequestHeader("Content-type", "application/json");
			xhttp.send(data);
		}
	</script>
</body>
</html>

 

package servlet;

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

import org.json.JSONObject;

import vo.Message;
import vo.Sample;

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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		String data = request.getParameter("msg");
		String data2 = request.getParameter("msg2");
		PrintWriter out = response.getWriter();
		
		//Message msg = new Message(data, data2);
//		JSONObject jobj = new JSONObject(msg);
		Sample sample = new Sample();
		JSONObject jobj = new JSONObject(sample);
		
		out.print(jobj);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		BufferedReader br = request.getReader();
		String jstr = br.readLine();
		System.out.println(jstr);
		
		JSONObject jobj1 = new JSONObject(jstr);
		System.out.println(jobj1);
		PrintWriter out = response.getWriter();
		String data = jobj1.getString("msg");
		String data2 = jobj1.getString("msg2");
		
		Message msg = new Message(data, data2);
		JSONObject jobj = new JSONObject(msg);
		
		out.print(jobj);
	}

}
package vo;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class Sample {
	private String name;
	private String[] hobbies;
	private Message message;

	public Sample() {
		name = "홍길동";
		hobbies = new String[3];

		hobbies[0] = "독서";
		hobbies[1] = "운동";
		hobbies[2] = "코딩";

		message = new Message("ok", "bye");

	}
}
package vo;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class Message {
	private String msg1;
	private String msg2;
}

 

저작자표시 비영리 변경금지 (새창열림)

'JQuery > 연습' 카테고리의 다른 글

이벤트연습  (0) 2023.07.05

관련글

티스토리툴바