如何从ajax响应对象更新特定div在javascript中返回一个表单

时间:2011-11-16 14:44:47

标签: javascript jquery ajax jsp spring-mvc

当选择特定的下拉列表时,会向Spring MVC控制器发送ajax请求。在JSP中创建的表单页面。 Controller响应对象将完整表单返回给JSP。因此,当我使用updateHTML时,它会返回先前加载的表单下的另一个表单。

我只需要更新包含另一个下拉列表的特定div。我想我有两个解决方案。仅从控制器发送该选择框的数据。或者我可以尝试仅更新我想要从响应中更改的div。

JSP页面中的两个下拉列表

   <b>Country:</b>
  <spring:bind path="company.country">
    <font color="red">
      <b><c:out value="${status.errorMessage}"/></b>
    </font>
    <br/>
    <select id="countryNameField" name="countryNameField" onchange="getStates();">
        <option value="">--</option>
        <c:forEach var="country" items="${countryList}">
            <option value='<c:out value="${country}"/>'
                <c:if test="${status.value == country}">selected</c:if>>
                   <c:out value="${country}"/>
            </option>
        </c:forEach>
    </select>
  </spring:bind>
  <p/>

<div id="statesManager" name="statesManager" style="display:none">
   <b>Manager:</b>
     <spring:bind path="company.manager">
       <font color="red">
         <b><c:out value="${status.errorMessage}"/></b>
       </font>
    <br/>
    <select name="manager">
        <option value="">--</option>
        <c:forEach var="manager" items="${managerList}">
            <option value='<c:out value="${manager}"/>'
                <c:if test="${status.value == manager}">selected</c:if>> 
                  <c:out value="${manager}"/>
            </option>
        </c:forEach>
    </select>
  </spring:bind>
  <p/>
</div>

从控制器返回的响应对象包含完整表单。我想只更新div

<div id="statesManager" name="statesManager" style="display:none">

Java脚本代码处理Ajax部分

var response = httpRequest.responseText;
                alert(response);
                document.getElementById("statesManager").innerHTML = response;
                document.getElementById("statesManager").style.display="block";

1 个答案:

答案 0 :(得分:1)

最后我找到了答案。非常感谢您对jQuery的支持。 这是我的工作线。

    $('#statesManager').load('yoururl #manager', 
{ 'parameterName': $('#countryNameField option:selected').val() });