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 相关文章推荐
js传值 判断
Oct 26 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
webpack4简单入门实例
Sep 06 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
vue使用element-ui按需引入
May 20 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
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
群众路线批评与自我批评
2014/02/06 职场文书
安全标准化实施方案
2014/02/20 职场文书
超市开学活动方案
2014/03/01 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
体检通知范文
2015/04/21 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers