SPRING

[TIL] 23.04.05 스프링

김짝 2023. 4. 5. 08:58

어제한것 복습!

 

@RequestMapping()

@GetMapping(), @PostMapping()

 

 

AJAX쓰려면 의존성 코드 추가해야함

mvnrepository에서 Jackson Databind 2.13.3

 

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.3</version>
</dependency>

 

@ResponseBody : json처리후 브라우저로 출력(일반컨트롤러일 경우에만)

 

@RestController는 무엇인가?

json전용으로 하고싶을때. 일반메서드는 안됨.

ResponseBody가 없어도 됨.

 

 

url에 한글이들어가는 이미지를 가져와야하는데 띄어쓰기가 있어서 제대로 인식을 못할경우

https://namu.wiki/w/URL%20escape%20code  

%20을 공백있는곳 대신 넣어서 공백을 인식하게 해준다.

 

 

ajax에서 map을 읽어오는거랑

ajax에서 list를 읽어오는것이 조금 다르다.

일단 spring은 model 1의 jsp랑 다르게 @Responsebody나 @RestController를 사용해서 json형식으로 브라우저에 출력이 가능하기 때문에 cos.jar를 이용하지 않아도 된다.

 

map방식

json형식으로 브라우저에 출력하는 법은 dto를 간단하게 만들어주고 그안에 명시적 생성자를 하나 만들어준다.

public class PhotoDto {

	private String name;
	private String photo;

	// 명시적 생성자
	public PhotoDto(String name, String photo) {
		this.name = name;
		this.photo = photo;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPhoto() {
		return photo;
	}

	public void setPhoto(String photo) {
		this.photo = photo;
	}
}

그 후에 컨트롤러에 아래와 같이 추가한다.

 

@Controller
public class JsonTestController {
	@GetMapping("/list1")
	@ResponseBody /* json처리후 브라우저로 출력(일반컨트롤러일 경우에만*/
	public Map<String , String> list1() {
		Map<String, String> map = new HashMap<String, String>();
		
		map.put("name", "이승기");
		map.put("hp", "010-2323-1234");
		map.put("addr","seoul");
		
		return map;
	}
}

위의 코드의 경우 @RestController가 아닌 일반 @Controller에 @ResponseBody를 이용하여서 map형태로 json을 만든다. 위 코드의 경우 /list1으로 가면 json형태로 확인이 가능하다.

{
	"name": "이승기",
	"hp": "010-2323-1234",
	"addr": "seoul"
}

 

 

이제 이것을 보여지는 화면에서 ajax로 가져오는 방법이다. 아래 코드를 보자

<body>
	<h3 class="alert alert-info">ex1예제</h3>
	<br>
	<button type="button" id="btn1" class="btn btn-info">list1 json데이터 출력하기</button>
	<div id="out1"></div>
	
	<script type="text/javascript">
		$("#btn1").click(function(){
			$.ajax({
				type:"get",
				dataType:"json",
				url:"list1",
				success:function(res) {
					$("#out1").empty();
					$("#out1").append("이름: "+res.name + "<br>");
					$("#out1").append("폰: "+res.hp + "<br>");
					$("#out1").append("주소: "+res.addr + "<br>");
					
				}
			});
		});
	</script>
</body>

jquery의 ajax를 이용해서 list1(json형태)에서 json을 가져와서 out1 div태그에 정보를 출력한다.

 

 

list방식

컨트롤러 추가

@RestController//json전용이라 일반메서드는 안됨.
public class JsonTest2Controller {
	
	@GetMapping("list2")
	public List<PhotoDto> list2() {
		List<PhotoDto> list = new ArrayList<PhotoDto>();
		
		list.add(new PhotoDto("자동차이미지1", "car_a_1.PNG"));
		list.add(new PhotoDto("자동차이미지2", "car_a_2.PNG"));
		list.add(new PhotoDto("자동차이미지3", "car_a_3.PNG"));
		list.add(new PhotoDto("자동차이미지4", "car_a_4.PNG"));
		list.add(new PhotoDto("자동차이미지5", "car_a_5.PNG"));
		
		return list;
	}
}

리스트방식으로 추가를 해주었다. 그리고 @RestController를 넣어서 @ResponseBody가 없어도 자동으로 사용된것처럼 실행된다. return한것이 json형태로 바뀐다. list2로 이동하면

[
{
"name": "자동차이미지1",
"photo": "car_a_1.PNG"
},
{
"name": "자동차이미지2",
"photo": "car_a_2.PNG"
},
{
"name": "자동차이미지3",
"photo": "car_a_3.PNG"
},
{
"name": "자동차이미지4",
"photo": "car_a_4.PNG"
},
{
"name": "자동차이미지5",
"photo": "car_a_5.PNG"
}
]

 

이제 이것을 보여지는 화면에서 ajax로 가져오는 방법이다. 아래 코드를 보자

<body>
	<h3 class="alert alert-info">ex2예제</h3>
	<br>
	<button type="button" id="btn2" class="btn btn-info">list2 배열 데이터 출력하기</button>
	<div id="out2"></div>
	
	<script type="text/javascript">
		$("#btn2").click(function(){
			$.ajax({
				type:"get",
				dataType:"json",
				url:"list2",
				success:function(res) {
					$.each(res, function(i){
						$("#out2").append("이름: "+res[i].name + "<br>" + "<img src=" +"/json/upload/"+res[i].photo+"><br>");
					});	
				}
			});
		});
	</script>
</body>

리스트에 배열 형태로 넣었기 때문에 $.each로 각각 돌면서 div에 출력해준다.

 

만약에 input 태그로 검색을 하여 가져오려면 list.add해줄때 name을 검색할 이름으로 적고 그것에 맞는 사진을 넣어준뒤

예시)list.add(new PhotoDto("롤스로이스", "car_a_4.PNG"));

보여지는 화면에서 ajax로 가져올때

<script type="text/javascript">
		$("#btn").click(function(){
			$.ajax({
				type:"get",
				dataType:"json",
				url:"list3",
				success:function(res) {
					$.each(res, function(i){
						if(res[i].name == $("#imgname").val()){
							$("#out").empty();
							$("#out").append("이름: "+res[i].name + "<br>" + "<img src=" +"/json/upload/"+res[i].photo+"><br>");
						}
					});
				}
			});
		});
	</script>

이렇게 가져오면 된다.

저작자표시 비영리