浅谈js获取ModelAndView值的问题

标题：浅谈JavaScript获取ModelAndView值的问题

标题：浅谈JavaScript获取ModelAndView值的问题

介绍：在使用Spring MVC框架开发Web应用时，通常会将后台处理的结果封装为ModelAndView返回给前端页面。在前端页面中使用JavaScript获取这些值时，需要注意一些问题。

1. 获取Model中的数据

ModelAndView中的Model是一个Map类型的对象，包含了后台处理结果中的数据。要在JavaScript中获取这些数据，需要在后台将它们以JSON格式返回，并在前端以Ajax方式请求。

下面是一个示例，后台返回了一个包含用户姓名和年龄的Map对象：

@RequestMapping("/getUserInfo")
@ResponseBody
public Map<String, Object> getUserInfo(){
    Map<String, Object> result = new HashMap<>();
    result.put("name", "张三");
    result.put("age", 20);
    return result;
}

在前端页面中，使用jQuery发起Ajax请求：

$.ajax({
    url: "/getUserInfo",
    type: "GET",
    dataType: "json",
    success: function(data){
        console.log(data.name);
        console.log(data.age);
    },
    error: function(jqXHR, textStatus, errorThrown){
        console.log("请求出错：" + errorThrown);
    }
});

在成功的回调函数的参数data中，就包含了后台返回的JSON数据。我们可以直接通过key来获取其中的值。

1. 获取View中的数据

ModelAndView中的View是一个String类型的视图名称，表示要渲染的视图页面。要在JavaScript中获取View中的数据，可以使用模板引擎来实现。

下面是一个示例，后台返回了一个包含三个用户信息的List对象：

@RequestMapping("/userList")
public ModelAndView userList(){
    List<User> userList = userService.getUserList();
    ModelAndView mav = new ModelAndView("userList");
    mav.addObject("userList", userList);
    return mav;
}

在前端页面中，使用Mustache.js模板引擎来渲染userList视图，并将后台传递的数据渲染到页面中：

<div id="user-list"></div>
<script id="user-list-template" type="text/template">
    {{#userList}}
    <div class="user">
        <span class="name">{{name}}</span>
        <span class="age">{{age}}</span>
    </div>
    {{/userList}}
</script>
<script>
    $.ajax({
        url: "/userList",
        type: "GET",
        dataType: "html",
        success: function(data){
            $("#user-list").html(data);
        },
        error: function(jqXHR, textStatus, errorThrown){
            console.log("请求出错：" + errorThrown);
        }
    });
</script>

注意，这里的dataType是html，因为后台返回的是一个渲染好的HTML页面，而不是JSON数据。在成功的回调函数中，将返回的HTML页面渲染到页面中，并使用Mustache.js模板引擎来渲染其中的数据。

总结：在前端页面中获取后台返回的数据时，需要注意数据格式以及是否需要使用模板引擎进行渲染。通过以上两个示例，我们可以看出，前端和后台的数据交互是一个很重要的环节，需要仔细处理。