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 相关文章推荐
javascript parseInt 大改造
Sep 27 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
树结构之JavaScript
Jan 24 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
setTimeout学习小结
Feb 08 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
几种响应式文字详解
May 19 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
javascript+Canvas实现画板功能
Jun 23 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
加速XP搜索功能堪比vista
2007/03/22 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
Javascript中replace()小结
2015/09/30 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
layui的select联动实现代码
2019/09/28 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
python计算两个数的百分比方法
2018/06/29 Python
python3.5绘制随机漫步图
2018/08/27 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Python如何使用字符打印照片
2020/01/03 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
《美丽的田园》教学反思
2014/03/01 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
正规借条模板
2015/05/26 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang