잡동사니에도 사랑을

[21.10.19] exam04(01_helloAjax) - JSON형식 불러오기 본문

JAVA_EE/AJAX

[21.10.19] exam04(01_helloAjax) - JSON형식 불러오기

luvforjunk 2021. 10. 19. 13:00
728x90
반응형

JSON?

 

 

////////exam04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/reset.css">
</head>
<body>
<h1 class="title">$.ajax() 함수를 사용한 텍스트 읽기</h1>
<div class="exec">
   <input type="button" value="txt파일 가져오기" id="mybtn" />
</div>
<div class="console" id="result"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$('#mybtn').click(function(){
	$.ajax({
		url: '../text/textdata.jsp',
		type: 'get',
		//data: "keyword=" + "Hello AJax!!", //서버로 보내는 데이터 - data: 변수=값, 형식으로
		data: {'keyword' : 'Hello AJax!!'}, // JSON형식
		dataType: 'text', //서버로부터 받는 데이터의 타입을 알려주는 것
		success: function(data){ //여기서의 data와 저 위의 data는 엄연히 다른 것이다. 같은 것이 아니야!
			$('#result').html(data);
		},
		error: function(err){
			console.log(err);
		}
	});
});
</script>	
</body>
</html>

<!-- 
풀주소
http://localhost:8080/AJaxJQuery/text/textdata.jsp?keyword=Hello AJax!!
 -->

 

 

 

////////textdata.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
String keyword = request.getParameter("keyword");
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
${param.keyword }
</body>
</html>

 

728x90
반응형

'JAVA_EE > AJAX' 카테고리의 다른 글

[21.10.20] exam02(02_xml)  (0) 2021.10.20
[21.10.19] exam01(02_xml) - Ajax를 이용해 XML불러오기  (0) 2021.10.19
[21.10.19] exam03(01_helloAjax)  (0) 2021.10.19
[21.10.19] exam02(01_helloAjax) - Ajax를 활용하여 HTML파일 내용 읽기  (0) 2021.10.19
[21.10.19] exam01(01_helloAjax) - Ajax활용하여 txt파일 불러오기  (0) 2021.10.19
'JAVA_EE/AJAX' Related Articles more