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

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

  • 8
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值