将Java列表返回到jQuery对象

Question

基本上，我有一个通过按钮实例化的Ajax请求，该请求在传递给我的控制器后，然后该控制器返回对象列表。 最初，我在考虑是否可以通过将返回的ajax对象加载到JSTL forEach循环中来完成此操作，但是我认为经过一些研究后就无法做到。 这是我的ajax请求，它基于一个值加载瞄准：

//edit the sighting based on the username value 
    $(this).on("click", ".edit_sighting", function(){
        $username = +$(".edit_sighting").val();
        $.get("${pageContext.request.contextPath}/getSighting/" + username, function(sightings){
            // load returned object somewhere 
        });
    });

这是我的控制器，用于处理ajax请求并响应，并返回对象列表“ sighting”：

@RequestMapping("/getSighting/{username}")
public @ResponseBody List<Sighting> getSighting(Model model, @PathVariable String username) {

    List<Sighting> sightings = sightingsService.getSightings(username);
    model.addAttribute("sightings", sightings);
    return sightings;
}

基本上，我想将返回的对象加载到for每个循环或将显示对象字段的内容中。 例如：类似的东西。 我的每个循环：

<c:forEach var="sighting" items="${sightings }">
        <c:out value="sighting.name"/> <!-- load some sighting value --> 
</c:forEach>

因此，本质上，我想要实现的是在实例化按钮时将多个“目标”加载到模式类型的东西中。

Answer 1

您不能为此使用JSTL，因为JSTL是在将页面发送到客户端之前在服务器上执行的。 您可以做的是在服务器上呈现HTML并返回HTML文档（而不是JSON）。 因此，解决方案将是定义一个JSP视图，该视图使用JSTL呈现列表并更改AJAX请求以接受HTML。

另一个解决方案是添加基于JavaScript的模板引擎，并进行客户端的模板渲染。

或者使用jQuery手动完成。 如果你有

<ul id="sightings"></ul>

那么你也能

var sightings = $('#sightings');
sightings.empty();
$.each(sightings, function(index, e){
    var li = $('<li>');
    li.text(e);
    sightings.append(li);
});

Answer 2

对ajax请求的响应将返回给客户端，该客户端无法访问服务器端机制，例如JSTL 。 该代码应在客户端使用Javascript / jQuery来显示新的DOM元素。

因此，如果页面上有以下HTML：

<ul id="sightings"></ul>

回调看起来像：

$(this).on("click", ".edit_sighting", function(){
    $username = +$(".edit_sighting").val();
    $.get("${pageContext.request.contextPath}/getSighting/" + username, function(sightings){
        var output = "";
        for(var i = 0; i < sightings.length; i++){
            output =+ "<li>" + sightings[i].name + "<\/li>";
        }
        $("#sightings").append(output);
    });
});

这将构建一个包含HTML的String ，该HTML对每次瞄准都有一个li 。 然后将HTML作为#sightings ul子级附加到DOM。

Answer 3

由于您使用的是Ajax，因此一旦您的请求返回响应，页面将不会重新加载，因此此代码将无法正常工作。 您可以做的是代替发送列表，而可以发送一个JSON数组作为响应，并且每个数组元素都将具有一个具有所有必需属性的JSON对象，并且可以在收到响应后对该数组进行迭代。