后端数据传输到前端的两种方法(JQuery:AJAX 或 SpringMVC:ModelAndView)

  • Post author:
  • Post category:其他


AJAX

前端

可以通过JQuery的ajax方法请求到后端$.ajax

<script>
    $(function() {
            $.ajax({
                url:'ajaxEmps',//传给后端@RequestMapping("/ajaxEmps")
                data:"name=yang",//参数可以有多种写法
                datatype:'json',//返回格式
                success:function(data){
                    emp = emp=eval("("+data+")");//将JSON格式的字符串转成JSON
                    $.each(emp, function(i, result) {  
                        console.log(result);
                        console.log(result.id);
                        item = "<tr><td>" + result.id + "</td><td>" + result.lastName + "</td></tr>";  
                            $('#AjaxTable').append(item); //将遍历的数据插进table表格里 
                        });         
                }
            })  
    });
</script>

后端

    private static Map<Integer, Employee> employees = null;//数据存放进这个变量中

    @RequestMapping("/ajaxEmps")
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
            resp.setContentType("text/html;charset=utf-8");
            PrintWriter out = resp.getWriter();
            out.print(employees.values());//将数据传到前端
            out.flush();
            out.close();
    }

ModelAndView

前端

<script>
    $(function() { 
            var emp = "${requestScope.emp}";//后端将数据放进了Model,然后前端从中获取数据
            emp=eval("("+emp+")");
            $.each(emp, function(i, result) {  
            item = "<tr><td>" + result.id + "</td><td>" + result.lastName + "</td></tr>";  
                $('#requestScopeTable').append(item);  //将遍历的数据插进table表格里
            });  
</script>

后端

private static Map<Integer, Employee> employees = null;//数据存放进这个变量中
@RequestMapping("/emps")
    public String list(Map<String,Object> map){
        map.put("emp",employees.values());
        return "list";
    }

数据

employees.toString()里是将所有变量拼接成JSON的格式

public String toString() {
        return "{'id':'" + id + "', 'lastName':'" + lastName + "'}";
    }

疑问

PS:数据在后端明明是Collection类型的,为什么传到前端就能,为什么传到前端就能变成JSON的字符串呢。

[{'id':'1001', 'lastName':'E-AA'},{'id':'1004', 'lastName':'E-DD'}]

JSON结构参考了:

http://www.json.org/json-zh.html



版权声明:本文为u011331067原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。