Обновление содержимого Spring MVC + AJAX

Я использую Spring MVC, но, честно говоря, я его изучаю. Я хотел бы знать (учебники, ссылки, что-то очень ценное!), Что лучший способ сделать обновление контента, т. Е. Div, используя AJAX. Первое, что я пытаюсь сделать, это простой калькулятор, который использует 2 значения, после нажатия кнопки я хочу показать div с результатом. Образец кодаОбновление содержимого Spring MVC + AJAX

<form th:method="post" action="" 
     class="form-horizontal" id="bmiForm"> 
     <div class="control-group" th:classappend="${#fields.hasErrors('height')} ? error"> 
      <label class="control-label" th:text="#{bmi.height}" /> 
      <div class="controls"> 
       <input id="height" type="number" min="0" th:field="*{height}" /> <span class="help-inline" th:errors="*{height}">[error]</span> 
      </div> 
     </div> 

     <div class="control-group" th:classappend="${#fields.hasErrors('weight')} ? error"> 
      <label class="control-label" th:text="#{bmi.weight}" /> 
      <div class="controls"> 
       <input id="weight" type="number" min="0" th:field="*{weight}" /> <span class="help-inline" th:errors="*{weight}">[error]</span> 
      </div> 
     </div> 

     <div id="data" th:fragment="bmiResult"> 
      // I'd like this content to be hidden at beginning and display the result, after handling by a controller. 
      <span id="randomid" type="text" th:text="${user.bmi}" /> 
     </div> 

     <div class="form-actions"> 
      <button type="submit" id="calculateBmi" name="_eventId_calculateBmi" class="btn btn-primary" th:text="#{calculate}" /> 
     </div> 
    </form>

источник

2014-10-07 ZZ 5

В основном вы используете функцию html() для обновления div при завершении определенной функции. Но опять же есть другие способы обновления с помощью ajax в зависимости от ваших требований, таких как append. Вы можете сосредоточиться на отдельных элементах или обновлять целые страницы.

Лично я нацелен на отдельные divs для простоты и эффективности.

здесь пример How to update a specific div with ajax and jquery

Простой пример

<html> 
//random html code 
<div id="calculator_result">Result</div> 

<a href="javascript;:" onClick="calculateResult()">Click Me</a> 
</html> 

//ajax functions 
<script> 
function calculateResult() { 
$("#calculator_result").html("23"); 
} 
</script>

В приведенном выше примере следует 23 место в DIV с идентификатором calculator_result.

Надеюсь, что это поможет. Если вам нужно больше, пожалуйста, дайте мне знать и плохо помогите вам.

источник

2014-10-08 00:08:00 Aeseir

Следующий вопрос: как обращаться с ним контроллером - как метод get с параметром? Пробовал что-то вроде этого, но у меня есть следующая ошибка: «Неоднозначное сопоставление найдено», потому что для одного и того же пути были определены два метода. –

Есть много способов, самый простой способ - с аннотацией RestController. Таким образом, вы выполняете функции в restcontroller так же, как и с обычным контроллером, все, что делает RestController, это преобразование в/из JSON. Кучи документации и примеры на нем в google. Если вы пытаетесь задать вопрос (так как сейчас он отключен), и я получу больше данных. – Aeseir

Я использую тимелеаф и его конкретные теги, поэтому я мог бы подготовить div, для которого просто нужен результат, и с параметром hidden = "true", а затем после вызова ajax просто сделайте хороший переход и измените скрытый параметр на false? –

Обновление содержимого Spring MVC + AJAX

ответ

Смежные вопросы