Spring MVC动态添加输入框

时间:2017-04-06 08:20:12

标签: javascript jquery json ajax spring-mvc

对于JSP,我可以创建一个空列表,默认情况下加载

@RequestMapping(value={"/npr.htm"})
public ModelAndView getHome(Model model) {
    ModelAndView viewModel = new ModelAndView();
    NPRBean nprBean = new NPRBean();
    try{
        //Initialize the first mobile number
        MobileNumber mb         = new MobileNumber();
        List mobilenumberlist   = new ArrayList<MobileNumber>();
        mobilenumberlist.add(0,mb);
        nprBean.setMobilenumberlist(mobilenumberlist);


        viewModel.addObject("nprBean",nprBean);
        viewModel.addObject("mobilenumberlist",mobilenumberlist);
        viewModel.setViewName("npr");
    }catch (Exception e){
        logger.error("Error ::" + e);
    }
    return viewModel;
}

对于jsp:

<c:set var="count" value="0" scope="page" />
    <c:forEach items="${nprBean.mobilenumberlist}" var="mobilelst" varStatus="loopStatus">
                            <div>
                                <label>Mobile Number ${count+1}</label>
                                <spring:bind path="nprBean.mobilenumberlist[${loopStatus.index }].phonenumberheader">
                                <
                                <select name="<c:out value="${status.expression}"/>" id="phonenumberheader-${count}" class="style12">
                                  <option value="">Please Select</option>
                                  <c:forEach items="${nprBean.mobilenumberheaderlist}" var="lst">
                                  <option value="<c:out value="${lst.numberHeader}"/>" 
                                        <c:if test="${mobilelst.phonenumberheader == lst.numberHeader}"> selected="selected"</c:if>>
                                        <c:out value="${lst.numberHeader}"/>
                                  </option>
                                  </c:forEach>
                                </select>
                                </spring:bind>
                                  -
                                <spring:bind path="nprBean.mobilenumberlist[${loopStatus.index }].phonenumber">
                                <input name="<c:out value="${status.expression}"/>" id="phonenumber-${count}" value="<c:out value="${mobilelst.phonenumber}"/>" class="style12" type="text" size="8" maxlength="9" onKeyPress="return ValidateKeyPress(event,3);" onblur="convertToCaps(this);trimSpace(this);"/></td>
                                </spring:bind>

                             </div>
    <c:set var="count" value="${count + 1}" scope="page"/>  
    </c:forEach>

但是现在我试图通过单击添加按钮来增加mobilenumberlist,并向控制器发出ajax并添加列表的大小,如:

$('#addnum').on('click', function(e) {
    $.ajax("npr/npraddrow.json?" + $('#search-form').serialize(), {
        method: "GET",
        accepts: "application/json",
        dataType: "json"
    }).done(function(data) {
        console.log("result ::"+data.result);


    }).fail(function(jqXHR, textStatus, errorThrown) {
            var errorMessage = "";
            if (jqXHR.status == 401) {
                errorMessage = "Your session has expired. Please <a href=\"<spring:url value='/login'/>\">login</a> again.";
            } else {
            try {
                var errorJson = JSON.parse(jqXHR.responseText);
                errorMessage = errorJson.error;
            } catch (e) {
                errorMessage = errorThrown || textStatus;
            }
            }
        });
    return true;
});

这里的问题是,如何替换现有的JSTL值? 如何将列表中的所有值返回给控制器?

使用屏幕enter image description here

更新方案

我需要在点击添加按钮后动态添加输入文本行,无论如何要这样做吗?

0 个答案:

没有答案