AJAX - eclipse/oracle

최성현·2023년 8월 7일

<%=ob.toString()%>XML 데이터 보내기 방법 2가지 dataType:"html"data가져오기 get/post 차이 getParameter serialize 입력한 값 읽기

AJAX

목록 보기

6/8

form - XML

XML - 데이터 보내기 방법 1

폼태그에 데이터 입력 후 jsp로 보내기

이름: <input type="text" id="name" size="10"><br>
핸드폰: <input type="text" id="hp" size="13"><br>

입력한 값들 읽기

var name=$("#name").val();
var hp=$("#hp").val();

방법 1

& 연결 연산자로 이어줘야한다/ajax구문에서 data로 받아올 것이기 때문

//데이터 보내기 방법 1
//& 연결연산자
var data="name="+name+"&hp="+hp;

ajax구문

ajax함수를 통해서 백엔드로 데이터를 보낸다

$.ajax({

get

post 방식이라면 encoding해야하지만 get방식은 한글깨짐이 없어서 안써도됨

type:"get",
url:"ex01_read1.jsp",

return할 것이 없을때는 html/서버에 저장할 것이기 때문에

dataType:"html",

정의내린 data가져와도 되고(data:data) 직접 써도 가능(data:{"name":name,"hp":hp},)
data:data

data:{"name":name,"hp":hp},
success:function(res){

XML - 데이터 보내기 방법 2

입력한 값 읽기

var name=$("#name").val();
var hp=$("#hp").val();

방법2

ajax함수 통해서 백엔드로 데이터를 보낸다

$.ajax({
				
			type:"get",
			url:"ex01_read2.jsp",
			dataType:"html",
			data:{"name":name,"hp":hp}, //방법2
			success:function(res){
					
				var s="<h2>"+name+"님 데이터를 DB에 추가함</h2>";
				s+="<h2>"+name+"님의 휴대폰번호인 "+hp+"를 DB에 추가함</h2>";
					
				$("#show").html(s)
			}
		})
	})

방법1 - read

request.getParameter

btn1에서 var name=$("#name").val();을 가져온것

String name=request.getParameter("name");
String hp=request.getParameter("hp");

콘솔창 확인

System.out.println("name: "+name);
System.out.println("hp: "+hp);

방법2 - read

request.getParameter

String name=request.getParameter("name");
String hp=request.getParameter("hp");

콘솔창 확인

System.out.println("name: "+name);
System.out.println("hp: "+hp);

form

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h3>폼태그에 데이터 입력 후 jsp로 보내기</h3>
	이름: <input type="text" id="name" size="10"><br>
	핸드폰: <input type="text" id="hp" size="13"><br>
	
	<button type="button" id="btn1">ajax로 서버에 보내기#1</button>
	<button type="button" id="btn2">ajax로 서버에 보내기#2</button>
	
	<hr>
	<div id="show"></div>
	
	
	<script>
		$("#btn1").click(function(){
			
			//입력한 값들을 읽는다
			var name=$("#name").val();
			var hp=$("#hp").val();
			
			//데이터 보내기 방법 1
			//& 연결연산자
			var data="name="+name+"&hp="+hp;
			//alert(data);
			
			//ajax함수를 통해서 백엔드로 데이터를 보낸다
			$.ajax({
				
				//post 방식이라면 encoding해야하지만 get방식은 한글깨짐이 없어서 안써도됨
				type:"get",
				url:"ex01_read1.jsp",
				//return할 것이 없을때는 html/서버에 저장할 것이기 때문에
				dataType:"html",
				//정의내린 data가져와도 되고(data:data) 직접 써도 가능(data:{"name":name,"hp":hp},)
				//data:data
				data:{"name":name,"hp":hp},
				success:function(res){
					
					//alert("success");
					$("#show").html("<h4 class='alert alert-info'>"+data+"</h4>");
				}
			})
		});
		
		$("#btn2").click(function(){
			
			//입력한 값 읽기
			var name=$("#name").val();
			var hp=$("#hp").val();
			
			//ajax함수 통해서 백엔드로 데이터를 보낸다
			$.ajax({
				
				type:"get",
				url:"ex01_read2.jsp",
				dataType:"html",
				data:{"name":name,"hp":hp}, //방법2
				success:function(res){
					
					var s="<h2>"+name+"님 데이터를 DB에 추가함</h2>";
					s+="<h2>"+name+"님의 휴대폰번호인 "+hp+"를 DB에 추가함</h2>";
					
					$("#show").html(s)
				}
			})
		})
		
	</script>
</body>
</html>

ex01_read1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	//btn1에서 var name=$("#name").val();을 가져온것
	String name=request.getParameter("name");
	String hp=request.getParameter("hp");
	
	//콘솔창 확인
	System.out.println("name: "+name);
	System.out.println("hp: "+hp);
%>
</body>
</html>

ex01_read2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String name=request.getParameter("name");
	String hp=request.getParameter("hp");
	
	//콘솔창 확인
	System.out.println("name: "+name);
	System.out.println("hp: "+hp);
%>
</body>
</html>

form - JSON

serialize 해당 아이디의 전체 태그 불러오기

var data=$("#frm").serialize();

ajax구문

$.ajax({
				
			type:"get",
			url:"ex02_read.jsp",
			dataType:"json",
			data:data, //이 구문은 serialize해서 굳이 필요 없는 문구
			success:function(res){
					
				var s="상품코드: "+res.code+"<br>";
				s+="상품명: "+res.name+"<br>";
				s+="가격: "+res.price+"<br>";
				s+="색상: "+res.color+"<br>";
					
				$("#show").html(s);
			}
		})

data:{"name":name} 이렇게 가져올 수도 있다

read

getParameter로 가져온 값은 form의 name에서 가져온 것

on.put("ajax구문에 쓸 변수",가져온 값)

넣은 값들 String으로 변환

<%=ob.toString()%>

<%
	String code=request.getParameter("s_code");
	String name=request.getParameter("s_name");
	String price=request.getParameter("s_price");
	String color=request.getParameter("color");
	
	JSONObject ob=new JSONObject();
	//위 값을 form ajax에서 값을 다시 지정
	ob.put("code", code);
	ob.put("name", name);
	ob.put("price", price);
	ob.put("color", color);
%>


<%=ob.toString()%>

form

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<!-- json 데이터 처리 -->
	<form id="frm">
		<table class="table table-bordered" style="width: 400px;">
			<tr>
				<td>상품코드</td>
				<td>
					<input type="text" name="s_code" id="s_code"
					class="form-contro" style="width: 100px;">
				</td>
			</tr>
			
			<tr>
				<td>상품명</td>
				<td>
					<input type="text" name="s_name" id="s_name"
					class="form-contro" style="width: 100px;">
				</td>
			</tr>
			
			<tr>
				<td>가격</td>
				<td>
					<input type="text" name="s_price" id="s_price"
					class="form-contro" style="width: 100px;">
				</td>
			</tr>
			
			<tr>
				<th>색상</th>
				<td>
					<input type="radio" name="color" value="yellow">노랑
					<input type="radio" name="color" value="orange">오렌지
					<input type="radio" name="color" value="cadetblue">청녹
					<input type="radio" name="color" value="brown">갈색
					<input type="radio" name="color" value="purple">보라
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button type="button" id="btn"
					class="btn btn-info">데이터 백엔드로 보내기</button>
				</td>
			</tr>
		</table>
	</form>
	<br>
	<div id="show" class="alert alert-info"></div>
	
	<script>
		$("#btn").click(function(){
			
			//serialize 해당 아이디의 전체 태그 불러오기
			var data=$("#frm").serialize();
			//alert(data);
			
			$.ajax({
				
				type:"get",
				url:"ex02_read.jsp",
				dataType:"json",
				data:data, //이 구문은 serialize해서 굳이 필요 없는 문구
				success:function(res){
					
					var s="상품코드: "+res.code+"<br>";
					s+="상품명: "+res.name+"<br>";
					s+="가격: "+res.price+"<br>";
					s+="색상: "+res.color+"<br>";
					
					$("#show").html(s);
				}
			})
		});
	</script>
</body>
</html>

read

<%@page import="org.json.simple.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String code=request.getParameter("s_code");
	String name=request.getParameter("s_name");
	String price=request.getParameter("s_price");
	String color=request.getParameter("color");
	
	JSONObject ob=new JSONObject();
	//위 값을 form ajax에서 값을 다시 지정
	ob.put("code", code);
	ob.put("name", name);
	ob.put("price", price);
	ob.put("color", color);
%>


<%=ob.toString()%>

JSON

에러 주의

var s에 정의된 값들에 " "띄어쓰기가 포함되어 있어서 값을 제대로 읽지 못함

var s="photono="+photono+"&photoname="+photoname+"&like1="+like1+"&like2="+like2+"&like3="+like3;

s는 ajax 구문에서 data:s로 받기 때문에 " "띄어쓰기가 있으면 띄어쓰기도 값으로 인식되어서 제대로 인식 안됨

$.ajax({
				
			type:"get",
			url:"ex03_receive.jsp",
			dataType:"json",
			data:s,
			success:function(res){
					
				var out="";
				out+="상품사진:"+res.photo+"<br>";
				out+="상품이름:"+res.photoname+"<br>";
				out+="첫번째칸:"+res.like1+"<br>";
				out+="두번째칸:"+res.like2+"<br>";
				out+="세번째칸:"+res.like3+"<br>";
				out+="총점:"+res.sum+"<br>";
				out+="평균:"+res.avg+"<br>";
					
				$("#show").append(out);
					
			}
		})

form

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<div style="margin: 50px;">
	<b>사진선택: </b>
	<select id="selImg">
		<option value="1">샌드위치</option>
		<option value="2">닭꼬치</option>
		<option value="3">육계장</option>
		<option value="11">망고샤벳</option>
		<option value="12">순두부라면</option>
	</select>
	
	<br><br>
	<input type="text" id="like1">
	<input type="text" id="like2">
	<input type="text" id="like3">
	
	<button type="button" id="btn1">데이터전송</button>
	<br>
	<div id="show" class="alert alert-info"></div>
	
	<script>
		$("#btn1").click(function(){
			
			var photono=$("#selImg").val();
			var photoname=$("#selImg option:selected").text();
			var like1=$("#like1").val();
			var like2=$("#like2").val();
			var like3=$("#like3").val();
			
			var s="photono="+photono+"&photoname="+photoname+"&like1="+like1+"&like2="+like2+"&like3="+like3;
			//alert(s);
			
			$.ajax({
				
				type:"get",
				url:"ex03_receive.jsp",
				dataType:"json",
				data:s,
				success:function(res){
					
					var out="";
					out+="상품사진:"+res.photo+"<br>";
					out+="상품이름:"+res.photoname+"<br>";
					out+="첫번째칸:"+res.like1+"<br>";
					out+="두번째칸:"+res.like2+"<br>";
					out+="세번째칸:"+res.like3+"<br>";
					out+="총점:"+res.sum+"<br>";
					out+="평균:"+res.avg+"<br>";
					
					$("#show").append(out);
					
				}
			})
		})
	</script>
</div>
</body>
</html>

receive

<%@page import="org.json.simple.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
//front에서 보낸 데이터 읽어오기
String photono=request.getParameter("photono");
String photoname=request.getParameter("photoname");
String like1=request.getParameter("like1");
String like2=request.getParameter("like2");
String like3=request.getParameter("like3");


//총점==>String을 int로 변환
//평균
int sum=Integer.parseInt(like1)+Integer.parseInt(like2)+Integer.parseInt(like3);
double avg=sum/3.0;


//front형태로 만들어서 다시 front로 보내기
//ob.put("","../Food/"+1+".jpg");
JSONObject ob=new JSONObject();
ob.put("photo", "<img src='../Food/"+photono+".jpg' width='100'>");
ob.put("photoname",photoname);
ob.put("like1",like1);
ob.put("like2",like2);
ob.put("like3",like3);
ob.put("sum",sum);
ob.put("avg",avg);

%>

<%=ob.toString()%>

최성현

백엔드 개발자로서 성장해 나가는 성현이의 블로그~

이전 포스트

AJAX - eclipse

다음 포스트

AJAX - eclipse/oracle

AJAX

form - XML

XML - 데이터 보내기 방법 1

폼태그에 데이터 입력 후 jsp로 보내기

입력한 값들 읽기

방법 1

ajax구문

get

XML - 데이터 보내기 방법 2

입력한 값 읽기

방법2

ajax함수 통해서 백엔드로 데이터를 보낸다

방법1 - read

request.getParameter

콘솔창 확인

방법2 - read

request.getParameter

콘솔창 확인

form

ex01_read1.jsp

ex01_read2.jsp

form - JSON

serialize 해당 아이디의 전체 태그 불러오기

ajax구문

read

form

read

JSON

에러 주의

form

receive

AJAX - eclipse

AJAX - eclipse/oracle

0개의 댓글