json数据传到前台并解析展示成列表的方法


Posted in Javascript onAugust 06, 2018

因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有 看到现成的,决定自己写个例子

1、HTML页面

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>文件柜取件列表</title>
 <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="/js/ai/ai-lib.js"></script>
 
</head>
 
<body>
<div class="main pusher">
 <form class="form_style">
  <div class="fields">
   <div class="div_1">
    <label for="lbl">取件标题</label>
    <input name="FileTitle" type="text" id="FileTitle">
   </div>
 
   <div class="div_l">
    <label>取件发文单位</label>
    <input name="comeDept" id="comeDept" placeholder="" type="text">
   </div>
 
   <div class="div_l">
    <label>投箱时间</label>
    <input type="text" maxlength="50" name="sendTime" id="sendTime" placeholder="">
   </div>
   <div class="div_l">
    <label>打印人单位</label> <input type="text" maxlength="50" name="printDept" id="printDept">  
   </div>
   <div>
    <label>打印人姓名</label>

    <input type="text" maxlength="50" name="printUser" id="printUser">
    <input type="button" value="查询" id="btSearch" class="btn_search"/>
   </div>
  </div>
 </form>
 
 <div class="table-container">
  <table class="ui nine column table celled table-result" id="table-result">
   <thead>
   <tr>
    <th>hotelSeq</th>
    <th>文件标题</th>
    <th>条码编号</th>
    <th>发文单位</th>
    <th>紧急程度</th>
    <th>份数</th>
    <th>密级</th>
    <th>投箱时间</th>
    <th>备注</th>
   </tr>
   </thead>
   <tbody id="tbody-result">
   </tbody>
  </table>
 </div>
</div>
</body>
</html>

2、filebox-print.jsp

$(function () {
 $('#btSearch').click(function () {
  var FileTitle= $('#FileTitle').val();
  var comeDept= $('#comeDept').val();
  var sendTime= $('#sendTime').val();
  var printDept = $('#printDept').val();
var printUser=$('#printUser').val();
  var tbody=window.document.getElementById("tbody-result");
 
  $.ajax({
   type: "post",
   dataType: "json",
   url: "<%=path%>/filebox/fileBox!getToDoFileBoxList.action",
   data: {
    FileTitle: FileTitle,
    comeDept: comeDept,
    sendTime: sendTime,
    printDept: printDept,
printUser:printUser 
   },
   success: function (msg) {
    if (msg.ret) {
     var str = "";
     var data = msg.data;
 
     for (i in data) {
      str += "<tr>" +
      "<td>" + data[i].fileTitle+ "</td>" +
      "<td>" + data[i].fileCode+ "</td>" +
      "<td>" + data[i].comeDept + "</td>" +
      "<td>" + data[i].fileEmerg+ "</td>" +
      "<td>" + data[i].alreadyCount+ "</td>" +
      "<td>" + data[i].fileSecret+ "</td>" +
      "<td>" + data[i].sendTime + "</td>" +
      "<td>" + data[i].remark+ "</td>" +
      "<td>" + data[i].fileboxId+ "</td>" +
"</tr>";
     }
     tbody.innerHTML = str;
    }
   },
   error: function () {
    alert("查询失败")
   }
  });
 });
});

做完之后感觉瞬间就踏实了不少,这个礼拜可以好好休息了。俺接触这个又学到了一点前台的知识了。

以上这篇json数据传到前台并解析展示成列表的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery中的ready函数冲突的解决方法
May 17 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
简单的代码实现jquery定时器
Jan 03 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
使用js实现将后台传入的json数据放在前台显示
Aug 06 #Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 #Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 #Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 #Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 #Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 #Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 #Javascript
You might like
PHP网站提速三大“软”招
2006/10/09 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
Add a Table to a Word Document
2007/06/15 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
关于vue面试题汇总
2018/03/20 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
python 解压pkl文件的方法
2018/10/25 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
python异常触发及自定义异常类解析
2019/08/06 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
跑吧孩子观后感
2015/06/10 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python