如何在spring mvc中实现部分渲染

时间:2015-03-08 11:25:33

标签: javascript jquery ajax spring spring-mvc

以下是html代码

<select name="userSelected" id="ddl">
    <option value="-1">---Select---</option>
    <c:forEach items="${users}" var="user" varStatus="status">
        <option value="${user.userId}">${user.userName}</option>
    </c:forEach>
</select>
<button type="button" onclick="showForm(this)">view</button>
<div id="test">
    <form:form id="expenseView"
        action="${pageContext.request.contextPath}/deleteExpense"
        method="POST" modelAttribute="users">

        <table>
            <thead>
                <tr>
                    <td align="justify"></td>
                    <td align="justify"><b>Item</b></td>
                    <td align="justify"><b>Amount</b></td>
                    <td align="justify"><b>ExpenseDate</b></td>
                </tr>
            </thead>
            <c:forEach items="${expenseList}" var="list" varStatus="status">
                <tr>
                    <td><input type="checkbox" name="check"
                        value="${list.expenseId}"></td>
                    <td>${list.itemDescription}</td>
                    <td>${list.amount}</td>
                    <td>${list.expenseDate}</td>
                </tr>
            </c:forEach>
        </table>
        <input type="submit" value="Delete">
    </form:form>
</div>

这是jquery,ajax am using

var hideResult = function() {
        $('#test').hide();
    };
    var showResult = function() {
        $('#test').show();
    };

    function showForm(myFormType) {

        var selectedValue = $('#ddl option:selected').val();

        var url = "${pageContext.request.contextPath}/viewExpense" + "?Id="
                + selectedValue;

        $.ajax({
            url : url,
        }).success(function(data) {
            $('#test').html(data);
        });
        showResult();
    }

我想要实现的是当用户点击视图按钮时,只有div部分应该刷新,因此我使用的是ajax,但是因为我的控制器正在发送一个视图名称所以它的作用是它令人耳目一新只有那一部分,但有一个更多相同类型的下拉列表被添加。 也许,因为我的控制器正在发送整个视图。那么如何实现部分渲染视图。请帮忙

1 个答案:

答案 0 :(得分:0)

您可以使用两种方法。

您可以根据请求中的参数调整发送的内容,或者在收到请求后解析您想要的html的响应。

这里是如何做第二种方法

    $.ajax({
        url : url,
    }).success(function(data) {
        var $form = $(data).find('#expenseView');
        $('#test').html($form);
    });

您也可以使用load() $.ajax的{​​{1}}简写方法替换上述内容:

$('#test').load(url +' #expenseView');// note that space before selector is important