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 lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
JavaScript数据结构中串的表示与应用实例
Apr 12 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
keep-alive保持组件状态的方法
Dec 02 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 工厂模式使用方法
2010/05/18 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php生成随机数的三种方法
2014/09/10 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
jQuery使用手册之一
2007/03/24 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
利用js编写网页进度条效果
2017/10/08 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python获取外网ip地址的方法总结
2015/07/02 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python sorted方法和列表使用解析
2019/11/18 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
10个示例带你掌握python中的元组
2020/11/23 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
公司户外活动总结
2014/07/04 职场文书
质检员岗位职责
2015/02/03 职场文书
出生证明范本
2015/06/15 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技