SpringMVC+Ajax+拼接html字符串

最新推荐文章于 2021-06-10 03:33:57 发布

微瞰技术

最新推荐文章于 2021-06-10 03:33:57 发布

阅读量1.6k

点赞数

分类专栏： SpringMVC SpringMVC-SpringBoot-SpringCloud 文章标签：拼接html ajax spring mvc 静态资源样式

本文链接：https://blog.csdn.net/u011342403/article/details/60620437

版权

SpringMVC 同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

SpringMVC-SpringBoot-SpringCloud

23 篇文章 7 订阅

订阅专栏

为什么写这个呢。因为在现在的网页中。单纯的同步传递数据已经变得非常少了。大多数都是通过Ajax异步来传递数据的。因此在这里用SpringMVC+Ajax做一个简单的小例子，同时辅助以拼接字符串显示。希望能为大家带来帮助。
本次案例的配置仍然是在上一篇SpringMVC的简单增删改查（SSM整合）的基础上再辅助配置Jackson的jar包。

服务器端

    @RequestMapping("/ajaxlist")
    @ResponseBody//(springmvc的Jackson注解，返回json字符串)
    public List<User> getUserList()
    {
        List<User> list =userService.findAll();
        return list;
    }

前端使用

  <body>
        <button id="testButton">异步传输</button>  
        <div id="content"></div>  
  </body>

Ajax请求并拼接字符串

<script type="text/javascript">
    $(function() {
        $("#testButton").click(function()
        {
            $.ajax(
            {
            url:"${pageContext.request.contextPath }/user/ajaxlist",
            type:'GET',
            dataType:'json',
            success:function(data)
            {
            //拼接字符串
                var html = "<table><tr><td>用户名</td><td>密码</td><td>昵称</td><td>电子邮箱</td></tr>";
                for(var i=0;i<data.length;i++)
                {
                    html=html+"<tr>"+"<td>"+data[i].username+"</td>"+"<td>"+data[i].password+"</td>"+
                    "<td>"+data[i].nickname+"</td>"+"<td>"+data[i].email+"</td>"+"</tr>";
                }
                html = html+"</table>";
                $("#content").append(html);
            }
        });
        });

    });
</script>