json获取数据库的信息在前端页面显示方法

更新时间：2018年05月27日 09:43:39 作者：LYF01fang

今天小编就为大家分享一篇json获取数据库的信息在前端页面显示方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

ajax发送请求到controller,controller响应一个json格式的数据给页面，

JSON.parse（）再解析json字符串，用$.each遍历。

   @RequestMapping("/list")
  public @ResponseBody java.util.List<UserVO> List() throws Exception{
    return service.get();
  }

<body>
<div id="datatable"></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
  $.ajax({
    type:"get",
    url:"/meihao/login/list.action",
    async:true,
    success:function(result){
      var m="<ul>";
      result=JSON.parse(result); 
      $.each(result, function(i,n) {
        console.log(n);
        m+="<li>"+"姓名："+n["username"]+"密码："+n["password"]+"</li>";
      });
      m+="</ul>";
      $("#datatable").append(m);  
    },
    error:function(error){
      alert(error.status+""+error.statusText);
    }
  });
});
</script>

以上这篇json获取数据库的信息在前端页面显示方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Ajax获取数据然后显示在页面的实现方法

ajax无刷新评论功能
这篇文章主要为大家详细介绍了ajax无刷新评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
Ajax基础与登入教程
Ajax 是 Asynchronous JavaScript and XML的缩写。其优点可以减轻服务器的负担,按需取数据,最大程度的减少冗余请求。接下来通过本文给大家介绍Ajax基础与登入教程，需要的的朋友参考下
2017-03-03
ajax局部刷新一个div下jsp内容的方法
局部刷新某个div下的jsp可以通过setInterval或者是setTimeout来轻松实现，具体如下，有此需求的朋友可以参考下，希望对大家有所帮助
2013-08-08
基于ajax实现无刷新分页的方法
这篇文章主要介绍了基于ajax实现无刷新分页的方法,实例分析了Ajax实现分页的技巧,需要的朋友可以参考下
2015-02-02
那些年，我还在学习Ajax 学习笔记
Ajax不用说，每个做web开发的同志都知道，因为它是学习web开发必经之路，不管你是做asp.net，还是javaWeb，还是PHP
2012-03-03
Ajax 返回字符串的过滤实现代码
在调用Ajax返回后。一个奇怪的问题。返回的resultString值是“ok”但是跟字符串"ok"比较确不相等。
2009-08-08
通过history解决ajax不支持前进/后退/刷新的问题
下面小编就为大家带来一篇通过history解决ajax不支持前进/后退/刷新的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Ajax验证用户名实例代码
这篇文章主要介绍了Ajax验证用户名实例代码，非常实用，特此分享供大家学习
2016-04-04
ajax后退解决方案
ajax后退解决方案，需要的朋友可以参考下。
2011-09-09
如何使用ajax读取Json中的数据
这篇文章主要介绍了如何使用ajax读取Json中的数据，如何使用AJAX读取Json数组里面的数据，感兴趣的小伙伴们可以参考一下
2016-04-04