Question

我正在开展一个项目，我需要在jsp /客户端显示记录。为此，我使用循环显示数据，如下面给出的，这对我来说很好。

JSP中的JSTL代码

<c:if test="${!empty students}">
    <c:forEach var="student" items="${students}">
        <c:if test="${student.type == 'event'}">
            <div class="student_card">
                <h3>Student Card</h3>
                <h4 class="stu_name" objType="${student.type}" objId="${student.obj.id}">${student.obj.name}</h4>
                <p class="stu-name">${student.obj.branch.name}</p>
                <div>
                    <div class="description">
                        <p>Description:</p>
                        <p class="description_text">${student.obj.description}</p>
                    </div>
                    <div class="fee_date">
                        <img src="${pageContext.servletContext.contextPath}/resources/images/clock.png" alt="clock" id="clock">
                        <p class="date_gray">${student.formatDate(student.obj.startTime)}&mdash;${student.formatDate(student.obj.endTime)}</p>
                    </div>
                    <div class="stu_status">
                        <p>
                        Status: <span class="stu_green">${student.obj.status}</span>
                        </p>
                        <c:if test="${student.obj.status eq 'In Progress'}">
                            <div class="btn_compl" remove_it="event_${student.obj.id}">
                                <a class="compl_btn_blue">Complete</a>
                            </div>
                        </c:if>
                    </div>
                </div>
            </div>
        </c:if>
    </c:forEach>
</c:if>

我有一个包含多个字段的表单e.g: Name, Gender, Age, class, etc.当用户点击其中任何一个字段时，我需要相应地display/filter数据。

例如：用户点击性别单选按钮并从中选择男性选项。因此，我需要显示所有男学生记录我不想提交表单并再次加载整页以节省时间，我使用Ajax来过滤数据。我的Ajax功能是这样的。

的Ajax

var data = 'studentName='+studentName+'&gender='+gender+'&studentClass='+studentClass+'&grades='+grades;

$.ajax({
    url: '${pageContext.servletContext.contextPath}/student/filter',
    type: 'POST',
    data: data,
    async: true,
    success: function(response) {
        /* Removing earlier data */
        $('.stu_info').remove();
        /* To display data dynamically which is not working for me */
        <c:forEach var="student" items="${filter}">
            $('.main_content').append('<div class="stu_info"><p>${student.type}</p></div>');
        </c:forEach>
    }
});

控制器：

@RequestMapping(value = "/student/filter", method = RequestMethod.POST)
public @ResponseBody Map<String, ? extends Object> filterStudents(@ModelAttribute(value = "studentName") String studentName, @ModelAttribute(value = "gender") String gender, @ModelAttribute(value = "studentClass") String studentClass, @ModelAttribute(value = "grades") String grades, BindingResult result, WebRequest webRequest, ModelMap map, Principal principal) {

    -------------------
    Code to filter Data
    -------------------

    map.put("filter", studentFilter);
    return Collections.singletonMap("filter", studentFilter);
}

问题：

我的Ajax在这里成功运作，我可以将数据放入过滤器中，其中包含过滤学生的数据。但是我无法在jsp端显示任何信息。我的jsp代码如下所示。

<c:if test="${!empty students}">
    <c:forEach var="student" items="${filter}">
        <c:if test="${student.type == 'event'}">
            <div class="student_card">
                <h3>Student Card</h3>
                <h4 class="stu_name" objType="${student.type}" objId="${student.obj.id}">${student.obj.name}</h4>
                <p class="stu-name">${student.obj.branch.name}</p>
                <div>
                    <div class="description">
                        <p>Description:</p>
                        <p class="description_text">${student.obj.description}</p>
                    </div>
                    <div class="fee_date">
                        <img src="${pageContext.servletContext.contextPath}/resources/images/clock.png" alt="clock" id="clock">
                        <p class="date_gray">${student.formatDate(student.obj.startTime)}&mdash;${student.formatDate(student.obj.endTime)}</p>
                    </div>
                    <div class="stu_status">
                        <p>
                        Status: <span class="stu_green">${student.obj.status}</span>
                        </p>
                        <c:if test="${student.obj.status eq 'In Progress'}">
                            <div class="btn_compl" remove_it="event_${student.obj.id}">
                                <a class="compl_btn_blue">Complete</a>
                            </div>
                        </c:if>
                    </div>
                </div>
            </div>
        </c:if>
    </c:forEach>
</c:if>

我认为这不起作用，因为在向用户显示内容之前在服务器端编译JSTL代码，我也检查了这个链接：Using JSTL inside Javascript。哪个状态我们不能在jQuery中使用jstl标签。

数据回复：

{
    "filter":
    [
        {
            "id":"123",
            "name":"jon",
            "class":"5",
            "startTime":1442206800000,
            "endTime":1444453200000,
            "percentage":88,
            "editable":true,
            "obj":
            {
                "id":"402880ed5012503801501252e2df0002",
                "authorizationRequired":false,
                "owner":
                {
                    "id":"402880f24ffeaaba014ffef2bb520015",
                    "school":
                    {
                        "id":"402880f24ffeaaba014ffef31aaf0017",
                        "name":"some school",
                        "enabled":true,
                        "size":300,
                        "sector":null,
                        "phone":"1231231232",
                        "location":"US"
                    }
                }
            }
        }
    ]
}

问题：

那么，有没有什么方法可以在客户端显示新的/动态数据。

任何建议或链接都会有所帮助。

Answer 1

你的ajax电话有问题。您正在jquery代码中编写jstl代码。 Jquery在客户端运行，其中jstl代码在服务器端运行。

var data = 'studentName='+studentName+'&gender='+gender+'&studentClass='+studentClass+'&grades='+grades;

$.ajax({
    url: '${pageContext.servletContext.contextPath}/student/filter',
    type: 'POST',
    data: data,
    async: true,
    success: function(response) {

        alert( "Response: " + response ); // <--------add this

        /* Removing earlier data */
        $('.stu_info').remove();

        // remove below code and write pure jquery code to iterate response as a json.

        /* To display data dynamically which is not working for me */
        <c:forEach var="student" items="${filter}">
            $('.main_content').append('<div class="stu_info"><p>${student.type}</p></div>');
        </c:forEach>
    }
});

参考：jQuery loop over JSON result from AJAX Success?

更新：正如所讨论的那样。

将返回类型更改为列表。

您可以在ajax响应中迭代列表，如下所示

jQuery.each(response, function(index, item) {
    //now you can access properties using dot notation
    alert(item.id);
    alert(item.name);
    alert(item.obj.id);
    alert(item.obj.owner.school.phone);
});

Answer 2

JSTL在服务器上呈现。如果您必须在客户端上呈现响应，它将无法帮助您。使用Javascript，特别是jQuery。

假设studentFilter是某种集合，您应该直接返回：

@ResponseBody List<Student> filterStudent(...) {
}

现在，Spring将返回Java数据类型的JSON表示，如下所示：

[
    {
        "type": "Some Value"
    },
    {
        "type": "Another Value"
    }
]

现在，在Javascript中：

$.each(response, function(index, student) {
    $('.main_content').append('<div class="stu_info"><p>' + student.type + '</p></div>');    
});

在春天使用ajax过滤动态数据

2 个答案: