Динамические URL JSON с JSP и Spring-mvc

Question

Я хотел бы передать переменную wordId через JSON GET в Spring-mvc Controller в моем веб-приложении.У меня нет проблем со статическим URL для работы с JSON, но я не знаю, как лучше всего делать это с динамическими / параметрическими URL.

Контроллер:

@RequestMapping(value="/delete/{wordId}", method = RequestMethod.GET)
@ResponseStatus(HttpStatus.NO_CONTENT)
public void deleteWord(@RequestParam ("wordId") Long wordId, Principal principal) {

     wordService.deleteWord(wordId, principal.getName());
}

JSP-часть:

<c:choose>
    <c:when test="${not empty accountWords}">
        <c:forEach items="${accountWords}" var="word" varStatus="status">
            <li class="word">
                <input type="checkbox" name="word" class="word_checkbox" value="" />
                <span>${word.word}</span>
                <s:url value="/words/delete/${word.wordId}" var="delete_word"></s:url>
                <a href="${delete_word}"><img src="resources/gfx/delete.png" /></a>
            </li>
        </c:forEach>
    </c:when>
</c:choose>

jПредложение пока:

$("li.word a").click(function(e) {
    e.preventDefault();
    var deleteUrl = ...
    $.getJSON(deleteUrl, function() {

    });
});

Не могли бы вы рассказать, как должна выглядеть моя часть jquery для передачи переменной wordId в контроллер?Я могу получить URL из атрибута href тега, но я хотел бы иметь относительный URL.Я застрял ...

ОБНОВЛЕНИЕ:

 $("#testJSON").click(function() {
    $.getJSON("admin/json.html", function(w) {
        $('#span_json').html("w.wordId + "<br>" + w.word);
    });
});

Answer 1

Поскольку wordId является частью URL, вы должны использовать аннотацию @PathVariable вместо @ RequestParam.

Кроме того, поскольку вы спрашивали о передовых методах, я должен отметить, что это не очень хорошая практика.использовать метод HTTP GET для действий, которые не являются идемпотентными.Другими словами, вы не должны использовать GET для действий, которые вносят изменения в данные на стороне сервера, например, для удаления записей из базы данных.

Правильный HTTP-метод для выполненияудаление записи - это метод HTTP DELETE.Некоторые старые браузеры не поддерживают DELETE, поэтому вы найдете много кода, который вместо этого выполняет POST для удаления.Я не думаю, что это больше проблема, хотя.См. http://annevankesteren.nl/2007/10/http-method-support для получения более подробной информации.

Использование DELETE вместо GET - это не просто хорошая идея ради "правильного поведения" ... оно может фактически помочь вам избежать некоторыхнеприятные проблемы.Существуют плагины для браузера, которые ускорят работу пользователей в Интернете, предварительно загрузив все ссылки на странице и сохранив их в локальном кэше.Если у пользователя установлен один из этих плагинов, он будет «нажимать» на каждую ссылку удаления на вашей странице!Кроме того, если вы создаете общедоступное приложение, поисковые роботы также будут следовать вашим ссылкам на удаление.Я видел, как это происходит в реальном мире, так что поверьте мне, это реальная проблема!

Еще одна лучшая рекомендация RESTful - использовать URL-адреса, соответствующие шаблону / noun / {id}, с использованием метода HTTPкак глагол.Таким образом, вместо / delete / {wordId} с GET, было бы лучше использовать / word / {wordId} с DELETE.

Со всеми моими предлагаемыми изменениями ваш код будет выглядеть следующим образом:

Контроллер

@RequestMapping(value="/word/{wordId}", method = RequestMethod.DELETE)
@ResponseStatus(HttpStatus.NO_CONTENT)
public void deleteWord(@PathVariable ("wordId") Long wordId, Principal principal) {
     wordService.deleteWord(wordId, principal.getName());
}

К сожалению, jQuery и JSP становятся немного сложнее, когда вы используете DELETE вместо GET.GET действительно заманчиво, потому что вы можете просто создать ссылку, как вы это сделали так:

<a href="${delete_word}"><img src="resources/gfx/delete.png" /></a>

Чтобы браузер использовал вместо этого DELETE, вам нужно либо иметь форму с методом DELETE, либо вынужно вызвать некоторый JavaScript, который делает AJAX DELETE.(Поскольку вы уже используете Ajax, я буду использовать эту технику.) Я бы начал с изменения вашей ссылки на кнопку:

<button class="delete-button" id="delete_${delete_word}"><img src="resources/gfx/delete.png" /></button>

Это создаст кнопку, в которой будет храниться идентификаторСлово, которое вы хотите удалить в идентификаторе самой кнопки.Каким-то образом вам нужно связать идентификатор слова для удаления с каждой кнопкой, и это один из способов сделать это.Я видел, как другие люди помещали идентификатор в скрытый промежуток рядом с кнопкой.(Честно говоря, я никогда не любил ни одну из этих техник, и я надеюсь, что кто-то из моих ответов ответит на этот вопрос лучшим способом.)

В любом случае, с этими изменениями в теле вашегоJSP вы также захотите добавить jQuery, который обрабатывает нажатие всех кнопок удаления.(Обратите внимание, что я поместил класс на кнопку «delete-button», чтобы в jQuery было легко ссылаться.)

jQuery:

$(".delete-button").on("click", function() {
    var wordId = $(this).attr("id").substring("delete_".length);
    $.ajax({
        type: "DELETE",
        url: "/word/" + wordId,
        success: function() {
            // Maybe put some code here that deletes the <li> ?
        }
    }); 
});

Обратите внимание, как я извлек слово id из атрибута id кнопки, на которую нажали:

var wordId = $(this).attr("id").substring("delete_".length);

Конечно, вы также можете сделать это следующим образом:

var wordId = $(this).attr("id").substring(7);

Я предпочитаю первоеспособ сделать это, потому что он самодокументирует, что делает подстрока.Во втором примере число 7 является магическим числом, которое не объясняет, что происходит.