从会话变量更新 html 表

Question

我对 JSP、jQuery 和 AJAX 还很陌生。我有一个 JSP，它使用基于会话中 List 变量中的值填充的表。代码在这里：

<table id="someData" class="display" width="95%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<c:forEach var="var" items="${sessionVar}">
<tr>
<td><c:out value="${var.ID}" /></td>
<td><c:out value="${var.name}" /></td>
<td><c:if test="${var.gender=='M'}">
<c:out value="Male" />
</c:if> <c:if test="${var.dispositionCD=='F'}">
<c:out value="Female" />
</c:if>
</td>
</tr>
</c:forEach>
</tbody>
</table>

我使用 .ajax 调用控制器，这可能会导致 sessionVar 变量发生变化。可以添加其他人，可以删除一些人，可以更改一些名称，或者根本没有更改。控制器只会刷新会话中的 List 变量。这是我在用户输入一些数据并按下按钮时运行的 ajax 调用：

        $.ajax({
            type : "POST",
            url : urlText,
            data : 'testdata',
            dataType : 'json',
            success : function(data,textStatus) {
                $('#errormessage').text(data);
            },
            error : function() {
                $("#errormessage").text("Error while processing request..Please try again");
            }
        });

那么一旦session中的List变量更新了，如何更新html表中的数据呢？我已经在 J​​SP 和 jQuery 上工作了大约一个月，所以如果这似乎是业余时间，请放轻松。 :)

Answer 1

试试这个。 http://jsfiddle.net/tonicboy/3HGFN/

HTML：

<p id="errormessage"></p>
<table id="someData" class="display" width="95%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane Doe</td>
            <td>Female</td>
        </tr>
    </tbody>
</table>
<button type="button" id="callAjax">Call the AJAX</button>

JS：

// We will use MockJAX to simulate an AJAX response - http://code.appendto.com/plugins/jquery-mockjax.
// This is only for illustration purposes, in your real app you would have a working controller.

$.mockjax({
    url: '/people/list',
    responseTime: 750,
    responseText: {
        numHits: 4,
        success: true,
        people: [
            {
                ID: 3,
                name: 'Adam Sapple',
                gender: 'M'
            },
            {
                ID: 4,
                name: 'Bill Board',
                gender: 'M'
            },
            {
                ID: 5,
                name: 'Candy Barr',
                gender: 'F'
            },
            {
                ID: 6,
                name: 'Dan Druff',
                gender: 'M'
            }
        ]
    }
});

$('#callAjax').click(function() {
    // Call the AJAX
    $.ajax({
        type : "POST",
        url : '/people/list',
        data : 'testdata',
        dataType : 'json',
        success : function(data, textStatus) {
            var tbody = $('#someData tbody');

            // clear out the existing table rows
            tbody.empty();

            // iterate through the results
            $.each(data.people, function(idx, person) {
                // create a row for each person
                var row = $('<tr></tr>');
                var genderText = (person.gender == 'M') ? 'Male' : 'Female';

                row.append('<td>' + person.ID + '</td>');
                row.append('<td>' + person.name + '</td>');
                row.append('<td>' + genderText + '</td>');

                tbody.append(row);
            });
        },
        error : function() {
            $("#errormessage").text("Error while processing request..Please try again");
        }
    });
});

更新：

根据您的 cmets，我更新了代码。基本上，您像以前一样进行 AJAX 调用，但不是在成功时动态创建新表，而是在成功时重新加载页面。

$.ajax({
    type : "POST",
    url : '/people/list',
    data : 'testdata',
    dataType : 'json',
    success : function(data, textStatus) {
        // reload page with force reload flag (force reload may not be necessary, try it without)
        location.reload(true);
    },
    error : function() {
        $("#errormessage").text("Error while processing request..Please try again");
    }
});