2019.08.21
https://api.jquery.com/jQuery.ajax/
jQuery.ajax() | jQuery API Documentation
Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available
api.jquery.com
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
// 컨트롤러 Common.java
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
@Controller
public class Common {
@RequestMapping(value = "/ajaxTest", produces = "application/json")
public @ResponseBody Map<String, Object> ajaxTest(){
Map<String, Object> map = new HashMap<String, Object>();
return map;
}
@RequestMapping("/ajaxCall")
public String ajaxCall() {
return "ajax/ajaxCall";
}
}
|
ajax 호출
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
ajaxCall test
<button type="button" id="ajaxCall">ajax call</button>
</body>
<script type="text/javascript">
$(function() {
$('#ajaxCall').click(function() {
// ajax 호출을 위한 정보 기입
var request = $.ajax({
url: "http://localhost/ajaxTest", // 호출 url
method: "POST", // 전송방식
data: { name : '홍길동호출' }, // 파라미터
dataType: "json" // 전송 받을 타입 ex) xml, html, text, json
});
// 호출 정상일 시 실행되는 메서드
request.done(function( data ) {
console.log(data);
});
// 호출 에러일 시 실행되는 메서드
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
// 호출 정상 또는 에러 상관없이 실행
request.always(function() {
console.log('완료');
});
})
})
</script>
</html>
|
'교육 > Java Script' 카테고리의 다른 글
| #90 Java Script chart.js로 차트 그리기 (0) | 2019.09.23 |
|---|---|
| #74 Java Script 기상청 API 활용 (0) | 2019.08.28 |
| #67 Java Script jQuery 기본적인 API 예제 (0) | 2019.08.16 |
| #45 Java Script <script type="text/javascript"> 와 <script> 차이 (0) | 2019.07.31 |
| #44 Java Script JQuery UI datepicker, 날짜 계산 (0) | 2019.07.31 |