AJAX - eclipse

최성현·2023년 7월 31일
$.ajax()XMLajaxjson
1

AJAX

목록 보기
2/8

AJAX로 출력해보기

$.ajax

//얻어올 방식 / 특정 상황을 제외하고는 get
type:"get",

//파일이름.확장자
url:"data1.xml",

//확장자
dataType:"xml",
                
//성공한다면 실행할 것
success:function(rsps){

XML 여러 값 데이터 가져오기

<script>
$("#btn1").click(function(){
		
			$.ajax({
            	//얻어올 방식
				type:"get",
                //파일이름.확장자
				url:"data1.xml",
                //확장자
				dataType:"xml",
                //성공한다면 실행할 것
				success:function(rsps){
					
					// 총 뽑아내는 것
					var s="";
					// 5개의 데이터를 가져오기 위해 each사용
					$(rsps).find("person").each(function(i,ele){
						
						// xml파일은 값을 $(ele)로 가져와야해서 한 변수에 넣어줌
						// xml파일의 데이터 값 가져오는 것
						var n=$(ele);
						
						//div 안에 값 하나씩 넣어줘서 보기 편하게 위해서
						s+="<div class='alert alert-info' style='width:400px'>";
						s+="번호: "+n.attr("no")+",";
						s+="이름: "+n.find("name").text()+",";
						s+="주소: "+n.find("addr").text();
						s+="</div>";
					});
					$("#show").html(s);
				}
			})
		});
</script>

여러값 배열(반복문)으로 데이터 가져오기

// 5개의 데이터를 가져오기 위해 each사용
$(rsps).find("person").each(function(i,ele){
						
	// xml파일은 값을 $(ele)로 가져와야해서 한 변수에 넣어줌
	// xml파일의 데이터 값 가져오는 것
	var n=$(ele);
						
	//div 안에 값 하나씩 넣어줘서 보기 편하게 위해서
	s+="<div class='alert alert-info' style='width:400px'>";
	s+="번호: "+n.attr("no")+",";
	s+="이름: "+n.find("name").text()+",";
	s+="주소: "+n.find("addr").text();
	s+="</div>";
});

each문에서 값 가져오기

xml파일은 값을 $(ele)로 가져와야해서 한 변수에 넣어줌
xml파일의 데이터 값 가져오는 것

원래버전
$(ele).attr("") // $(ele).가져올 속성 이름 등등..

간략버전
var n=$(ele);
n.attr("") // n.가져올 속성 이름 등등...

JSON 배열 데이터 가져오기

$("#btn2").click(function(){
			
			//json파일 주석
			//여러 배열값을 주기 위해서[{},{}...] 사용
			
			$.ajax({
            	// 특정 상황을 제외하고는 get
				type:"get",
				url:"data1.json",
				dataType:"json",
				
				//json에서는 인자res를 배열타입으로 봄
				success:function(res){
					
					//출력용
					var s="";
					
					//json에서 인자(res)로 넘어온 data는 배열타입
					//그래서 $.each(res)로 배열 가져오면 됨
					$.each(res,function(i,item){
						
						//div는 예쁘게 뽑기위해서 넣어준 것
						s+="<div class='alert alert-danger' style='width:200px'>"
						s+="index: "+i+"<br>";
						s+="num: "+item.num+"<br>";
						s+="sangpum: "+item.sangpum+"<br>";
						s+="<img src='"+item.photo+"' width='50'>";
						s+="</div>";
					})
					
					$("#show").html(s);
					
				}
			})
		});

json 배열 데이터 가져오기

//json에서는 인자res를 배열타입으로 봄
success:function(res){
					
	//출력용
	var s="";
					
	//json에서 인자(res)로 넘어온 data는 배열타입
	//그래서 $.each(res)로 배열 가져오면 됨
	$.each(res,function(i,item){
    
    //div는 예쁘게 뽑기위해서 넣어준 것
		s+="<div class='alert alert-danger' style='width:200px'>"
		s+="index: "+i+"<br>";
		s+="num: "+item.num+"<br>";
		s+="sangpum: "+item.sangpum+"<br>";
		s+="<img src='"+item.photo+"' width='50'>";
		s+="</div>";
	})

json 인자

//json에서 인자(res)로 넘어온 data는 배열타입
//그래서 $.each(res)로 배열 가져오면 됨
$.each(res,function(i,item){

json 값 가져오기

item.배열 안 변수명

xml파일

find를 통해 no로 구분해서 값 가져오기

<?xml version="1.0" encoding="UTF-8"?>
<data>
<!-- no값은 find로 가져온다 -->
	<person no="1">
		<name>최성현</name>
		<addr>서울시</addr>
	</person>
	<person no="2">
		<name>장순영</name>
		<addr>경기도</addr>
	</person>
	<person no="3">
		<name>최진평</name>
		<addr>제주시</addr>
	</person>
	<person no="4">
		<name>진현규</name>
		<addr>인천시</addr>
	</person>
	<person no="5">
		<name>이성신</name>
		<addr>부산시</addr>
	</person>
</data>

json파일

단일배열 방법 {}
다중배열 방법 [{},{},{}...]

[
	{"num":10,"sangpum":"슬랙스","photo":"../image/20.png"},
	{"num":11,"sangpum":"아우터","photo":"../image/10.png"},
	{"num":12,"sangpum":"썸머햇","photo":"../image/18.png"},
	{"num":13,"sangpum":"헤어밴드","photo":"../image/15.png"}
]

출력 html

<!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>
<style>
	#show{
		margin-top: 30px;
		font-family: "Cute Font";
		font-size: 1.3em;
	}
</style>
</head>
<body>
	<h2>JQuery의 ajax함수를 이용한 XML데이타 읽기</h2>
	<button type="button" class="btn btn-outline-info"
	id="btn1">data1.xml</button>
	
	<h2>JQuery의 ajax함수를 이용한 JSON데이타 읽기</h2>
	<button type="button" class="btn btn-outline-info"
	id="btn2">data1.json</button>
	
	<div id="show"></div>
	
	<script>
		
		
		$("#btn1").click(function(){
		
			$.ajax({
				type:"get",
				url:"data1.xml",
				dataType:"xml",
				success:function(rsps){
					
					// 총 뽑아내는 것
					var s="";
					// 5개의 데이터를 가져오기 위해 each사용
					$(rsps).find("person").each(function(i,ele){
						
						// xml파일은 값을 $(ele)로 가져와야해서 한 변수에 넣어줌
						// xml파일의 데이터 값 가져오는 것
						var n=$(ele);
						
						//div 안에 값 하나씩 넣어줘서 보기 편하게 위해서
						s+="<div class='alert alert-info' style='width:400px'>";
						s+="번호: "+n.attr("no")+",";
						s+="이름: "+n.find("name").text()+",";
						s+="주소: "+n.find("addr").text();
						s+="</div>";
					});
					$("#show").html(s);
				}
			})
		});
		
		
		$("#btn2").click(function(){
			
			//json파일 주석
			//여러 배열값을 주기 위해서[{},{}...] 사용
			
			$.ajax({
            	// 특정 상황을 제외하고는 get
				type:"get",
				url:"data1.json",
				dataType:"json",
				
				//json에서는 인자res를 배열타입으로 봄
				success:function(res){
					
					//출력용
					var s="";
					
					//json에서 인자(res)로 넘어온 data는 배열타입
					//그래서 $.each(res)로 배열 가져오면 됨
					$.each(res,function(i,item){
						
						//div는 예쁘게 뽑기위해서 넣어준 것
						s+="<div class='alert alert-danger' style='width:200px'>"
						s+="index: "+i+"<br>";
						s+="num: "+item.num+"<br>";
						s+="sangpum: "+item.sangpum+"<br>";
						s+="<img src='"+item.photo+"' width='50'>";
						s+="</div>";
					})
					
					$("#show").html(s);
					
				}
			})
		});
	</script>
</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

AJAX 개념

다음 포스트

AJAX - eclipse 설정

0개의 댓글