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 相关文章推荐
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
javascript倒计时效果实现
Nov 12 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
使用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缓存技术的使用说明
2011/08/06 PHP
微信支付开发告警通知实例
2016/07/12 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
js Function类型
2011/12/04 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
推普周活动总结
2014/08/28 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis