2013-10-16 4 views
0

기본적으로 Ajax 요청은 컨트롤러로 전달되는 버튼으로 인스턴스화 된 다음 컨트롤러가 객체 목록을 반환합니다. 처음에는 JSTL forEach 루프에 반환 된 ajax 객체를로드하여이 작업을 수행 할 수 있는지 여부를 생각하고 있었지만 일부 연구를 수행 한 후에는 수행 할 수 없다고 생각했습니다.Java 목록을 jQuery 객체로 반환

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

그리고 본질적 :

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

이것은 아약스 요청을 처리하고 개체를 '관찰'의리스트를 돌려 응답 내 컨트롤러 : 이는 값을 기준으로 목격로드 내 아약스 요청입니다 반환 된 개체를 각 루프 또는 개체 필드를 표시하는 뭔가로드 할 싶습니다. 예를 들면 : 그런 것. 각 루프에 대한 내 :

그래서 본질적으로 버튼이 인스턴스화 될 때, 부하 여러 또는 하나의 '목격'모달 타입의 일에 무엇을 내가 달성하기 위해 노력하고
<c:forEach var="sighting" items="${sightings }"> 
     <c:out value="sighting.name"/> <!-- load some sighting value --> 
</c:forEach> 

.

+0

JSON으로 객체를 직렬화하기 위해 잭슨을 사용하십시오 –

+0

@DavidFregoli'@ ResponseBody' 주석의 존재를 감안할 때 OP가 이미 직렬화되고 있다고 가정합니다. –

답변

2

에서 JSTL이 실행되기 전에 페이지가 클라이언트로 전송되기 때문에 JSTL을 사용할 수 없습니다. 할 수있는 일은 서버에서 HTML을 렌더링하고 JSON 대신 HTML 문서를 반환하는 것입니다. 따라서 JSTL을 사용하여 목록을 렌더링하고 HTML을 허용하는 AJAX 요청을 변경하는 JSP보기를 정의하는 것이 해결책입니다.

다른 해결책은 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); 
}); 
+0

나는 ajax를 사용하여 특정 테이블을 렌더링하는 jsp를 만들었다. 귀하의 솔루션은 도움이되었습니다. 고맙습니다 – Maff

1

ajax 요청에 대한 응답이 JSTL과 같은 서버 측 메커니즘에 대한 액세스 권한이없는 클라이언트로 반환됩니다. 코드는 새로운 DOM 요소를 표시하기 위해 클라이언트 측에서 Javascript/jQuery를 사용해야합니다. 이 각각의 관찰에 대한 li이있는 String 포함 된 HTML을 구축 할 것입니다

$(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이 있다면 : 같은

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

콜백이 보일 것이다. 그런 다음 HTML은 #sightings ul의 하위 항목으로 DOM에 추가됩니다.

+0

이름에 HTML 문자가 포함되지 않기를 바랍니다. –

0

요청이 작동하지 않습니다 어쨌든이 코드 때문에 응답을 반환하면 페이지가 다시로드되지 않도록 당신이 아약스를 사용하고 있기 때문에. 당신이 할 수있는 일은 목록을 보내는 대신 JSON 배열을 응답으로 보낼 수 있으며 각 배열 요소는 필요한 모든 속성을 가진 JSON 객체를 가지며이 배열은 응답을받은 후에 반복 될 수 있습니다.

관련 문제