Question

我使用的是Spring MVC，但说实话，我正在学习它。我想知道（教程，链接，非常感谢！）什么是进行内容更新的最佳方式，即使用AJAX的div。我尝试做的第一件事是使用2个值的简单计算器，按下按钮后我想显示带结果的div。示例代码

<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>

Answer 1

基本上使用html（）函数在特定函数完成时更新div。但是，还有其他方法可以使用ajax进行更新，具体取决于您的要求，例如追加。您可以专注于单个元素或刷新整个页面。

我个人为了简单和高效而针对个别div。

这是一个示例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中，并使用id calculator_result。

希望有所帮助。如果您需要更多，请告诉我并帮助您。

Spring MVC + AJAX内容更新

1 个答案: