Java 在spring中使用ajax过滤动态数据

我正在从事一个项目，其中我需要在jsp/客户端上显示记录。为了做到这一点，我使用了一个循环来显示下面的give这样的数据，这对我来说很好

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>

控制器：

@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);
}

{
    "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"
                    }
                }
            }
        }
    ]
}

问题：

@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);
}

{
    "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"
                    }
                }
            }
        }
    ]
}

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

---

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

您在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>
    }
});

---

JSTL在服务器上呈现。如果您必须在客户机上提供响应，则这对您没有帮助。使用Javascript，特别是jQuery

假设

studentFilter

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

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

现在，在Javascript中：

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

$。每个（响应、函数（索引、学生）{
$（'.main_content'）。追加（''+student.type+'
'）；
});

是的，这是我面临的问题。我知道这是行不通的，我想知道是否有其他方法可以在不刷新页面的情况下动态显示数据。我在答案中添加了一个链接。引用该链接。这意味着我需要发送数据作为响应，然后我需要使用链接中描述的每个函数。我说的对吗？在jquery函数中添加上述警报并发布返回的JSON。这取决于返回的JSON的结构。如果它不包含列表或映射，那么您将不需要每个函数。请检查并告诉我是否可以使用您的解决方案，因为我的JSON中有多个级别对象。多个级别都可以，只是嵌套对象。您可以在Javascript中遍历它们，就像它们是Java中的嵌套对象一样。谢谢+谢谢你的回答

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

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