[jQuery] dataType읽어오기 (text, jsonobject, jsonarray, objectarray)

text, jsonobject, jsonarray, objectarray

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src = "../js/jquery-3.6.0.min.js"></script>

<script>
const xhr = new XMLHttpRequest();
	
$(function(){

	$('#text').on('click', function(){
		
		// 요청
		xhr.open('get', 'text.jsp', true)
		xhr.send()
		
		// 응답 
		xhr.onreadystatechange = function(){
			if(this.readyState == 4 && this.status == 200){
				txt = this.responseText;
				// 홍길동/개나리/진달래/무궁화/삼천리/금수강산
				
				arr = txt.split("/");
				//for(i=0; i<arr.length; i++){}
				str = "";
				
				$.each(arr, function(i){
					str += arr[i] + "<br>";
				})
				
				$('#result1').html(str);
				
			}
		}
	})
	
		$('#jobj').on('click', function(){
		
		// 요청
		xhr.open('get', 'jobj.jsp', true)
		xhr.send()
		
		// 응답 - json Object 
		xhr.onreadystatechange = function(){
			if(this.readyState == 4 && this.status == 200){
				json = JSON.parse(this.responseText);
				str = `이름:  ${json.name} <br>`;
				str += `주소 : ${json.addr} <br>`;
				str += `전화번호 : ${json.tel} <br>`;
				str += `아이디 : ${json.id} <br>`;
				
				$('#result2').html(str);
				
			}
		}
	})
	
		$('#jarr').on('click', function(){
		
		// 요청
		xhr.open('get', 'jarr.jsp', true)
		xhr.send()
		
		// 응답 - json Object 
		xhr.onreadystatechange = function(){
			if(this.readyState == 4 && this.status == 200){
				arr = JSON.parse(this.responseText);
				
				str = "<ol>";
				$.each(arr, function(i){
					str += "<li>" + arr[i] + "</li>"
					
				})
				
				str += "</ol>";
				
				$('#result3').html(str);
				
			}
		}
	})
	
		$('#obarr').on('click', function(){
		
		
		// 응답 - json Object 
		xhr.onreadystatechange = function(){
			if(this.readyState == 4 && this.status == 200){
				
				arr = JSON.parse(this.responseText);
				
				str = "";
				$.each(arr, function(i, v){ // arr[i] = v
					
					str += `${i+1} 번째 데이터<br>`; 
					str += `이름:  ${v.name} <br>`;
					str += `주소 : ${arr[i].addr} <br>`;
					str += `전화번호 : ${v.tel} <br>`;
					str += `아이디 : ${arr[i].id} <br><br>`;
					
				})
				
				$('#result4').html(str);
			}
		}
		
		// 요청
		xhr.open('get', 'obarr.jsp', true)
		xhr.send()
		
	})
	
	
	

})


</script>

</head>

<body>

<div class="box">
	
	<br>
	<button id="text" type="button">text</button>
	<button id="jobj" type="button">jsonobject</button>
	<button id="jarr" type="button">jsonarray</button>
	<button id="obarr" type="button">objectarray</button>
	<div id="result1"></div>
	<div id="result2"></div>
	<div id="result3"></div>
	<div id="result4"></div>
	
</div>
</body>
</html>

text.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	// 클라이언트 정보 요청시 전송되는 데이터 받기
	// DB와 연결해서 CRUD처리를 한다.
	// CRUD처리후 결과를 가지고 응답 데이터 만들기 - text데이터 만들기(String타입)
	
%>

홍길동/개나리/진달래/무궁화/삼천리/금수강산

jsonobject.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <%
    //json object데이터 생성
    %>
    
    {
	    "name" : " 홍길동",
	    "addr" : "대전",
	    "tel" : "010-1234-5678",
	    "id" : "a001"
    }

jsonarray.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	 // crud처리후
	 
	 //jsonarray 데이터를 생성
	 
%>

["홍길동", "개나리", "진달래", "무궁화", "삼천리", "금수강산"]

objectarray.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


<%
	//json object 배열 생성
	
%>
[

 	{
	    "name" : " 홍길동",
	    "addr" : "대전",
	    "tel" : "010-1234-5678",
	    "id" : "a001"
    },
    {
	    "name" : "개나리",
	    "addr" : "서울",
	    "tel" : "010-2222-5678",
	    "id" : "a002"
    },
    {
	    "name" : "동백이",
	    "addr" : "제주도",
	    "tel" : "010-3333-5678",
	    "id" : "a003"
    },
    {
	    "name" : "해바라기",
	    "addr" : "부산",
	    "tel" : "010-4444-5678",
	    "id" : "a004"
    },
    {
	    "name" : "장미",
	    "addr" : "강릉",
	    "tel" : "010-5555-5678",
	    "id" : "a005"
    }
    
    

]

Author And Source

이 문제에 관하여([jQuery] dataType읽어오기 (text, jsonobject, jsonarray, objectarray)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@vgo_dongv/jQuery-dataType읽어오기-text-jsonobject-jsonarray-objectarray

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)