如何在使用ajax後在JSP中顯示模型屬性？

我有一個問題。我使用ajax成功地將JSP中的index值傳遞給控制器。當我點擊'傳遞'按鈕時，'索引'值正在增加，並通過ajax成功傳遞給控制器。根據這個索引，我將list [index]添加到model中（用model.addAttribute）雖然我在JSP中使用了${nextWord}，但在視圖中看不到這個值。我該如何解決它？感謝您的回答。如何在使用ajax後在JSP中顯示模型屬性？

控制器

private List<Map<String, Object>> list; 

@RequestMapping(value="/practice/{category}", method = RequestMethod.GET) 
public String practicePageStart(@PathVariable("category") String category, 
           ModelMap model, HttpSession session){ 
    // return 10 value from DB. Example; 
    // [{idWord=1},{word='exampleWord'},{meaning='turkishMeaning'},{type='NOUN'}] 
    list = wordService.getRandomWords(Integer.parseInt(String.valueOf(session.getAttribute("wordCount")))); 
    model.addAttribute("wordList", list); 

    return "practiceCategory"; 
} 

@RequestMapping(value="/practice/{category}", method = RequestMethod.POST) 
public String practicePagePost(@PathVariable("category") String category, 
      @RequestParam("index") int index, ModelMap model, HttpSession session){ 

    model.addAttribute("nextWord", list.get(index).get("word")); 

    return "practiceCategory"; 
}

JSP

<script> 
    $(document).ready(function() {       
     $('#pass').click(function(event) { 
      var inputIndex = $('#index').val(); 
      $.ajax({ 
       type: "POST", 
       url: "${pageContext.request.contextPath}/practice/${category}", 
       async: false, 
       data: { index: inputIndex } 
       complete: function(){ 
        alert("${nextWord}"); 
        $('#label').text("${nextWord}"); 
       } 
      }); 
      document.getElementById("index").value = (parseInt(document.getElementById("index").value) + 1).toString(); 
     }); 
    }); 
</script>

來源

2017-03-03 Volkan Şahin

你怎麼在警報得到什麼？ – VPK

我什麼都得不到。 –

嘗試從你的控制器返回對象（如'return list.get（index）.get（「word」）'），而不是JSP名稱，如果你沒有在其他地方使用它。 – VPK

控制器方法改成這樣：

@RequestMapping(value="/practice/{category}", method = RequestMethod.POST) 
@ResponseBody 
public String practicePagePost(@PathVariable("category") String category, 
      @RequestParam("index") int index, ModelMap model, HttpSession session){ 

    return list.get(index).get("word"); 
}

而且你的Ajax這樣的：

  $.ajax({ 
       type: "POST", 
       url: "${pageContext.request.contextPath}/practice/${category}", 
       async: false, 
       data: { index: inputIndex } 
       success: function(data){ 
        alert(data); 
        $('#label').text(data); 
       } 
      });

來源

2017-03-03 10:06:53 mhshimul

謝謝你的回答。優秀。 :) –

@ResponseBody使用和返回的對象，而然後返回一個ViewResolver。

返回ViewResolver將解析視圖並在進行Ajax調用時發送html內容。因此，如果你只需要價值，不推薦。

例如@ResponseBody

public @ResponseBody Integer retriveValue(-,-,-){ 
return Integer.valueOf(5); 
}

來源

2017-03-03 09:58:12 sitakant

謝謝你的回答。我想返回一個列表值。（list [index]）我想你明白我想返回'index'。但它有幫助。 :) –

很酷...代碼片段是假的。 – sitakant

在我看來你混的不同：（1）rendring階段（servlet容器 - 背景 - JAVA）與（2）在瀏覽器中運行（JS，無請求屬性在這裏存在）。

您只需要另一個jsp文件來渲染數據。或者你在practicePagePost方法中將它作爲json返回。

@ResponseBody 
@RequestMapping(value="/practice/{category}", method = RequestMethod.POST) 
public String practicePagePost(@PathVariable("category") String category, 
      @RequestParam("index") int index, ModelMap model, HttpSession session){ 

    return list.get(index).get("word"); 
}

來源

2017-03-03 10:00:44 Mark

謝謝你的回答。我修復它。 :) –

如何在使用ajax後在JSP中顯示模型屬性？

回答

相關問題