728x90
1. 화면 만들기
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
{"name":"홍길동","age":25, "array" : ["전주","익산"]}
json의 데이터 타입은 application/json 이기 때문에 설정해주고 {"키":"값"} 입력해준다.
주의사항 ! 키값은 항상 쌍따옴표, 문자열은 항상 쌍따옴표, 숫자는 제외
여기서 키값을 잘못 설정해 주면 파스에러가 납니다.
2. 불러온 페이지도 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax - json </title>
<script type="text/javascript" src ="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ajaxCall').click(function(){
var request = $.ajax({
url: "ajaxJsonCall.jsp", //통신할 url
method: "POST", //통신할 메서드 타입
//data: { len : num }, //전송할 데이터
dataType: "json" //전송받은 데이터를 변환시킬 컨텐츠 타입
});
request.done(function( data ) {
console.log(data);
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<button type = "button"id="ajaxCall">호출</button>
<input type="text" id="ajaxResult" readonly="readonly" placeholder="회원명"/>
</body>
</html>
3. 이제 데이터를 가져와 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax - json </title>
<script type="text/javascript" src ="./resource/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#ajaxCall').click(function(){
var request = $.ajax({
url: "ajaxJsonCall.jsp",
method: "POST",
//data: { len : num },
dataType: "json"
});
request.done(function( data ) {
if(data != undefined && data !=''){
console.log(data);
$('#ajaxResult').val(data.name);
}
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
</head>
<body>
<button type = "button"id="ajaxCall">호출</button>
<input type="text" id="ajaxResult" readonly="readonly" placeholder="회원명"/>
</body>
</html>가져오는 데이터가 null 아니라면, 공백이 아니라면 그 값의 name을 #ajaxResult의 value로 입력한다.
반응형
'[YERIEL] 개발일기 > .etc' 카테고리의 다른 글
| [C언어] 베이스볼게임 만들기 (2) | 2021.05.13 |
|---|---|
| jQurey - Ajax (0) | 2020.03.31 |
| jQuery - Html Ajax (0) | 2020.03.31 |
| 객체 편집 메서드 실습 (0) | 2020.03.31 |
| 동적 바인딩 & 트리거 & 이벤트 제거 (0) | 2020.03.30 |
댓글