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 操作全局监测,用户session失效的解决方法

    ajax 操作全局监测,用户session失效的解决方法

    下面小编就为大家带来一篇ajax 操作全局监测,用户session失效的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • ajax基本通用代码示例

    ajax基本通用代码示例

    这篇文章主要介绍了ajax基本通用代码,简单分析了常用ajax的定义与使用技巧,需要的朋友可以参考下
    2016-05-05
  • Ajax开始准备入门篇

    Ajax开始准备入门篇

    我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬。
    2010-10-10
  • 用ajax实现预览链接可以看到链接的内容

    用ajax实现预览链接可以看到链接的内容

    用CSS设置预览弹出窗口的样式、用JavaScript进行服务器请求并且显示弹出窗口,需要的朋友可以参考下
    2014-08-08
  • Ajax结合php实现二级联动

    Ajax结合php实现二级联动

    这篇文章主要为大家详细介绍了Ajax结合php实现二级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • ajax post方式表单提交setRequestHeader报错解决方法

    ajax post方式表单提交setRequestHeader报错解决方法

    ajax post方式表单提交设置异步对象的xhr.setRequestHeader,在谷歌浏览器的编译器中显示传值在Request Payload中这是错误的
    2014-09-09
  • 利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

    利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

    这篇文章主要介绍了利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能,需要的朋友可以参考下
    2017-08-08
  • 给初学ajax的人 ajax函数代码

    给初学ajax的人 ajax函数代码

    是原生的ajax,稍稍的封装了下,对了,option为json格式的数据,对此可先看这个
    2010-05-05
  • Ajax中的循环方案

    Ajax中的循环方案

    在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签,怎么实现的呢?下面小编给大家介绍下ajax中的循环方案,感兴趣的朋友一起学习吧
    2016-10-10
  • 十大最佳Ajax教程收集(图文)

    十大最佳Ajax教程收集(图文)

    Ajax通常被认为是一门单独的语言,实际上它是很多语言的集合包括DHTML, Javascript, XML 和JSON,全称为Asynchronous JavaScript and XML(异步JavaScript和XML),是由Jesse James Gaiiett创造的名词。
    2010-02-02

最新评论