json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法

2024-05-06 15:32:05

字體：大中小

供稿：網(wǎng)友

因?yàn)槟承┰颍?xiàng)目中突然需要做自己做個(gè)ajax異步獲取數(shù)據(jù)后動(dòng)態(tài)向表格中添加數(shù)據(jù)的頁面，網(wǎng)上找了半天都沒有看到現(xiàn)成的，決定自己寫個(gè)例子

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">取件標(biāo)題</label>    <input name="FileTitle" type="text" id="FileTitle">   </div>    <div class="div_l">    <label>取件發(fā)文單位</label>    <input name="comeDept" id="comeDept" placeholder="" type="text">   </div>    <div class="div_l">    <label>投箱時(shí)間</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>文件標(biāo)題</th>    <th>條碼編號(hào)</th>    <th>發(fā)文單位</th>    <th>緊急程度</th>    <th>份數(shù)</th>    <th>密級(jí)</th>    <th>投箱時(shí)間</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>" +

上一篇：深入淺析var,let,const的異同點(diǎn)

下一篇：animate.css在vue項(xiàng)目中的使用教程