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中this的使用说明
Sep 06 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
js创建对象的方法汇总
Jan 07 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
使用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笔记之:AOP的应用
2013/04/24 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
js中replace的用法总结
2013/12/27 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python绘制雪景图
2019/12/16 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
致跳高运动员加油稿
2014/02/12 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
爱心捐款感谢信
2015/01/20 职场文书
二审代理词范文
2015/05/25 职场文书
追悼会悼词大全
2015/06/23 职场文书
运动员入场前导词
2015/07/20 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
VUE递归树形实现多级列表
2022/07/15 Vue.js