Статьи

Spring MVC REST звонит с помощью Ajax

Март 15, 2019

В этом посте приведен простой пример вызовов REST для веб-приложения Spring MVC. Он основан на примере обслуживания статических ресурсов с помощью Spring MVC и выборки JSON с помощью Ajax In Spring MVC Context . Код доступен на GitHub в каталоге Spring-REST-With-Ajax.

Главная страница

Наша главная страница содержит четыре кнопки, связанные с функциями Javascript, выполняющими вызовы Ajax:

1
2
3
4
5
6
7
8
9
...
<body>
<h1>Welcome To REST With Ajax !!!</h1>
<button type='button' onclick='RestGet()'>GET</button>
<button type='button' onclick='RestPut()'>PUT</button>
<button type='button' onclick='RestPost()'>POST</button>
<button type='button' onclick='RestDelete()'>DELETE</button>
</body>
...

Javascript

Наш файл Javascript содержит четыре функции:

01
02
03
04
05
06
07
08
09
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var prefix = '/spring-rest-with-ajax';
 
var RestGet = function() {
        $.ajax({
        type: 'GET',
        url:  prefix + '/MyData/' + Date.now(),
        dataType: 'json',
        async: true,
        success: function(result) {
            alert('At ' + result.time
                + ': ' + result.message);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert(jqXHR.status + ' ' + jqXHR.responseText);
        }
   });
}
 
var RestPut = function() {
 
    var JSONObject= {
        'time': Date.now(),
        'message': 'User PUT call !!!'
    };
 
    $.ajax({
        type: 'PUT',
        url:  prefix + '/MyData',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(JSONObject),
        dataType: 'json',
        async: true,
        success: function(result) {
            alert('At ' + result.time
                + ': ' + result.message);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert(jqXHR.status + ' ' + jqXHR.responseText);
        }
    });
}
 
var RestPost = function() {
        $.ajax({
        type: 'POST',
        url:  prefix + '/MyData',
        dataType: 'json',
        async: true,
        success: function(result) {
            alert('At ' + result.time
                + ': ' + result.message);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert(jqXHR.status + ' ' + jqXHR.responseText);
        }
    });
}
 
var RestDelete = function() {
        $.ajax({
        type: 'DELETE',
        url:  prefix + '/MyData/' + Date.now(),
        dataType: 'json',
        async: true,
        success: function(result) {
            alert('At ' + result.time
                + ': ' + result.message);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert(jqXHR.status + ' ' + jqXHR.responseText);
        }
    });
}

контроллер

Наш контроллер захватывает вызовы REST и возвращает JSON. В реальных приложениях можно выполнять операции CRUD, а не возвращать JSON:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@Controller
@RequestMapping(value = '/MyData')
public class MyRESTController {
 
    @RequestMapping(value='/{time}', method = RequestMethod.GET)
    public @ResponseBody MyData getMyData(
            @PathVariable long time) {
 
        return new MyData(time, 'REST GET Call !!!');
    }
 
    @RequestMapping(method = RequestMethod.PUT)
    public @ResponseBody MyData putMyData(
            @RequestBody MyData md) {
 
        return md;
    }
 
    @RequestMapping(method = RequestMethod.POST)
    public @ResponseBody MyData postMyData() {
 
 return new MyData(System.currentTimeMillis(),
            'REST POST Call !!!');
    }
 
    @RequestMapping(value='/{time}', method = RequestMethod.DELETE)
    public @ResponseBody MyData deleteMyData(
            @PathVariable long time) {
 
        return new MyData(time, 'REST DELETE Call !!!');
    }
}

Запуск примера

После компиляции пример можно запустить с помощью mvn tomcat: run. Затем просмотрите:

HTTP: // локальный: 8585 / весна-остальное-с-Аякса /

Главная страница будет отображаться:

Если вы нажмете на любую кнопку, появится всплывающее окно:

Смотрите здесь для получения дополнительной информации о REST • Больше сообщений, связанных с Spring здесь .

Ссылка: Spring MVC REST Calls With Ajax от нашего партнера JCG Джерома Версринга в блоге Технических заметок .

38
Share: