后台传输json数据+前台使用ajax请求并处理json数据

最新推荐文章于 2024-05-16 13:56:10 发布

LFyuChen

最新推荐文章于 2024-05-16 13:56:10 发布

阅读量8.8k

点赞数 1

本文链接：https://blog.csdn.net/Liu_Fangyuan/article/details/81117559

版权

后台使用response传输json数据（把从数据库的list数据，改变为json数据传输到前台。没有使用@ResponseBody，其实这个也可以）

@RequestMapping("/index"）
    public void index(HttpServletResponse response){
        response.setContentType("text/html;charset=UTF-8");//防止中文乱码
        List<User> list = serviceDemo.selectAll();
        String str1= null;
        if(list!=null) {
            ObjectMapper x = new ObjectMapper();//ObjectMapper类提供方法将list数据转为json数据
            try {
                str1 = x.writeValueAsString(list);
            } catch (JsonProcessingException e) {
                e.printStackTrace();
            }
        }
        try {
            response.getWriter().print(str1);    //返回前端ajax
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

前台：首先要想使用ajax，必须导入接收包（这一句话直接写到jsp页面直接使用）

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

script内容（整个jsp页面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url : "/User/index",//请求地址
                dataType : 'json',//数据格式
                type : "post",//请求方式
                data :"",
                async : false,//是否异步请求
                success : function(msg) {//如何发送成功
                    var data = eval(msg);//将msg化为数
                    var num = 1;
                    $.each(data, function (num){
                        //alert(data[num].userName);
                        var id = data[num].userId;//注意要与实体类中的名称相同
                        var Name = data[num].userName;
                        var Phone = data[num].userPhone;
                        var Address = data[num].userAdress;

                        var value = "<tr><td align='center'><input name='checked' type='checkbox'  value="+id+"/></td>";
                        value +="<td align='center'>"+Name+"</td> <td align='center'>"+Name+"</td> <td align='center'>"+Phone+"</td> <td align='center'>"+Address+"</td><tr/>";
                        $("#tb").append(value);//写入到id为tb的html部分
                    });
                },
            })
        })
    </script>
</head>
<body>
<table  id="tb" width="80%" border="1" cellspacing="0" cellpadding="0"  align="center" >
    <tr>
        <%--   <th align="center"><input name="checked" type="checkbox" /></th>--%>
        <th align="center">ID</th>
        <th align="center">Name</th>
        <th align="center">Password</th>
        <th align="center">Phone</th>
        <th align="center">Address</th>
    </tr>
</table>
</body>
</html>

最后给个tip，如果不知道哪有问题，直接用alert(输出的内容），来调试

LFyuChen

关注

1
点赞
踩
29

收藏

觉得还不错? 一键收藏
3
评论
后台传输json数据+前台使用ajax请求并处理json数据

后台使用response传输json数据（把从数据库的list数据，改变为json数据传输到前台。没有使用@ResponseBody，其实这个也可以）@RequestMapping("/index"） public void index(HttpServletResponse response){ response.setContentType("text/html;c...
复制链接

扫一扫