使用ajax后如何在JSP中显示模型属性？答案

【问题标题】：How to show model attribute in JSP after using ajax?使用ajax后如何在JSP中显示模型属性？
【发布时间】：2017-07-23 07:58:49
【问题描述】：

我有问题。我使用 ajax 将 index 值从 JSP 成功传递到控制器。当我单击“通过”按钮时，“索引”值正在增加，并使用 ajax 成功传递给控制器。根据这个索引，我将list[index]添加到模型中。（与model.addAttribute）虽然我在JSP中使用了${nextWord}，但我在视图中看不到这个值。我该如何解决？谢谢你的回答。

控制器

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>

【问题讨论】：

你得到什么警报？
我什么也得不到。
如果您没有在其他任何地方使用它，请尝试从您的控制器（如return list.get(index).get("word")）返回对象而不是 JSP 名称。
什么是'practiceCategory'？是另一个 JSP 文件吗？
没有。这是上面的JSP文件。

标签： ajax spring jsp post model

【解决方案1】：

使用 @ResponseBody 并返回对象而不是返回 ViewResolver。

返回 ViewResolver 将解析视图并在执行 Ajax 调用时发送 html 内容。因此，如果您只需要价值，则不建议这样做。

@ResponseBody 示例

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

【讨论】：

感谢您的回答。我想返回一个列表值。(list[index]) 我猜你明白我想返回'index'。但它有所帮助。 :)

【解决方案2】：

在我看来，你混合不同：（1）渲染阶段（servlet容器-后台-java）vs. (2) 在浏览器中运行（js，这里不存在request属性）。

您需要另一个 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");
}

【讨论】：

感谢您的回答。我修复它。 :)

【解决方案3】：

把你的控制器方法改成这样：

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

【讨论】：

感谢您的回答。优秀。 :)