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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
bootstrap table实例详解
Jan 06 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
vue开发拖拽进度条滑动组件
Sep 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中使用CURL获取页面title例子
2015/01/07 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
js判断是否是手机页面
2017/03/17 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
超市端午节活动方案
2014/01/23 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
工作证明英文模板
2014/10/21 职场文书
专项资金申请报告
2015/05/15 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
创业计划书之服装
2019/10/07 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Go timer如何调度
2021/06/09 Golang
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL