JSP Spring MVC根据另一个字段中的值填充表单字段答案

【问题标题】：JSP Spring MVC Populating Form Fields Based on Value in Another FieldJSP Spring MVC根据另一个字段中的值填充表单字段
【发布时间】：2017-12-14 22:48:02
【问题描述】：

我有一个在 JSP 中构建的 Spring MVC 表单，它需要在字段中输入一个帐号。当我输入该号码时，我想对数据库运行一个查询，以提取该特定号码的相关信息。然后，此数据将填充表单上的其他字段。

这是我在 JSP 中的 Spring 绑定代码，用于将输入的帐号。所以，只要我输入这个数字，就会触发一个数据库查询，以带回其他字段的数据。

<spring:bind path="strExpenseAcctNum">
    <div class="form-group ${status.error ? 'has-error' : ''}">
        <label class="col-sm-2 control-label">Expense Account Number :</label>
        <div class="col-sm-10">
            <form:input path="strExpenseAcctNum" type="string" class="form-control " id="strExpenseAcctNum" placeholder="strExpenseAcctNum" />
            <form:errors path="strExpenseAcctNum" class="control-label" />
        </div>
    </div>
</spring:bind>

根据我的研究，我认为 Javascript 和 JQuery 的组合可能是最好的方法，但在这方面是新手，我不知道如何配置它。

任何帮助将不胜感激。

谢谢，

戴夫

【问题讨论】：

首先了解将事件绑定到元素。 learn.jquery.com/events 学习ajax。 learn.jquery.com/ajax 这个想法是绑定一个事件以在输入输入到您的文本字段时进行捕获，并且当您想要时，将 ajax 请求发送到您拥有数据的端点，这将返回您将使用的响应以某种方式更新您的页面。
谢谢你Taplar

标签： java jquery spring jsp spring-mvc

【解决方案1】：

@戴夫

首先使用 spring 表单标签实现您的表单，如下所示。

<form:form method="POST" action="/spring-mvc-example" modelAttribute="example">
         <table>
            <tr>
                <td><form:label path="number">Account Number</form:label></td>
                <td><form:input path="number" id="number"/></td>
            </tr>
            <tr>
                <td><input type="submit" value="Submit"/></td>
            </tr>
        </table>
    </form:form>

然后，一旦用户从帐号字段中移出焦点，就使用 Jquery 的 focusout 方法在后台进行 Ajax 调用。然后在成功块中，如果需要，只需解析它并使用 jquery 的 val 方法绑定到您的其他字段，如下所示。

$("#number").focusout(function(){
      $.ajax({
         type:"POST",
         url:"https://example.com/getDetails",
         success: function(data) {
             //Response from the controller comes here
             var json = JSON.stringify(data);
             //Bind it to fields like these
             $("#firstname").val(json.firstname);
         }
      });
});

希望这对你有用，如果有任何问题，请告诉我。

【讨论】：