json數據傳到前臺并解析展示成列表的方法
更新時間：2018年08月06日 15:06:04 作者：LanBuff
今天小編就為大家分享一篇json數據傳到前臺并解析展示成列表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
因為某些原因，項目中突然需要做自己做個ajax異步獲取數據后動態(tài)向表格中添加數據的頁面，網上找了半天都沒有 看到現成的，決定自己寫個例子
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>取件發(fā)文單位</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>發(fā)文單位</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 遍歷Json的實現代碼，需要的朋友可以參考下。2010-03-03
通常情況下,json的在項目中的應用都是在后臺把數據傳到前臺,然后前臺再獲取json中的數據.2012-01-01
在開發(fā)的項目中，遇到這樣一個例子：當用戶選擇某一個用戶名時，彈出當前用戶的評分卷，該評分卷列出了所有一級評分項，讓用戶進行評分操作。2010-12-12
如何解析Json已經成為了眾多業(yè)內人士談論的焦點，依我看，要解析輕量化類型json，用.net自帶的類庫就可以勝任了，有一種看起來更方便的老古董——正則表達式，處理json是綽綽有余，感興趣的你可不要錯過了哈2013-02-02
這篇文章主要為大家介紹了寫給小白學習的地理信息的表示法GeoJSON的詳細實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
本文主要介紹了JSON.parse 數據不完整的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
今天小編就為大家分享一篇JS解析后臺返回的JSON格式數據實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JQuery用$.ajax或$.getJSON跨域獲取JSON數據的實現代碼
這篇文章主要介紹了JQuery用$.ajax或$.getJSON跨域獲取JSON數據的實現代碼,需要的朋友可以參考下2017-09-09
JSON?WEB?Token是一種基于JSON的、用于在網絡上聲明某種主張的令牌，由三部分組成:?頭信息,?消息體和簽名，下面就一起來了解一下什么是JWT2023-05-05
今天小編就為大家分享一篇快速解決處理后臺返回json數據格式的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08