如何在Spring mvc中通过ajax在select标签上附加数据

时间:2018-06-02 10:32:43

标签: javascript jquery html ajax spring-mvc

我正在制作一个小的Spring MVC项目,我保存用户数据。在页面中,当我点击编辑后端的国家数据填充并且我应用Ajax Onchange事件当管理员选择国家,状态列表追加和管理员选择时州,区列表附加等等。但是当我点击编辑国家数据和无状态时,区域数据附加。我也尝试在加载时运行Ajax。任何人都可以帮助我我的代码看起来像

UserController.java

@RequestMapping(value = "/editApplicant/{id}", method = RequestMethod.GET)
public String editUser(@PathVariable("id") int id, ModelMap modelMap) {
    UserDataPojo userDataPojo = userDataService.getDetailsById(id);
    List<DestinationPojo> destinationPojos = destinationService.getAllCountries();

    modelMap.addAttribute("countries", destinationPojos);
    modelMap.addAttribute("applicantData", userDataPojo );
    if (applicantDataPojo == null) {
        modelMap.addAttribute("Msg", "User is Not Found");
    }
    return "updateuser";
}

和 updateuser.jsp

        <label>Country*</label>
        <form:select class="form-control"
         onChange="AjaxCallStateperma()" id="parmanentCountry" 
         path="parmanentCountry">
         <form:option value="${null}">Select</form:option>
         <form:options items="${countries}" itemLabel="countryName" 
         itemValue="countryId" />
         </form:select>


        <label>State*</label>
        <form:select class="form-control"
         onChange="ajaxcalldistrictperma()" id="parmanentState" 
         path="parmanentState">
        <form:option value="${null}">Select</form:option>
        </form:select>

我的ajax是

<script type="text/javascript">
    // bussiness Address to list start
    function AjaxCallState() {
        var country = $('#businessCountry').val();
        console.log(country);
        $.ajax({
            url : "${pageContext.request.contextPath}/loadState",
            async : false,
            type : "GET",
            data : "state=" + country,

            contentType : "application/json;charset=UTF-8",
            dataType : "json",
            success : function(data) {
                $('#businessState').empty();
                $('#businessState').append(
                        '<option value="null">Select State</option>');
                $.each(data, function(i, value) {
                    $('#businessState').append(
                            $('<option>').text(value.stateName).attr(
                                    'value', value.stateId))
                });
            }
        });
    }

1 个答案:

答案 0 :(得分:0)

我自己解决了这个问题。我们应该在javascript中使用IIFE(立即调用函数表达式)函数。