json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法
更新時(shí)間：2018年08月06日 15:06:04 作者：LanBuff
今天小編就為大家分享一篇json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
因?yàn)槟承┰颍?xiàng)目中突然需要做自己做個(gè)ajax異步獲取數(shù)據(jù)后動(dòng)態(tài)向表格中添加數(shù)據(jù)的頁(yè)面，網(wǎng)上找了半天都沒(méi)有 看到現(xiàn)成的，決定自己寫(xiě)個(gè)例子
1、HTML頁(yè)面
<!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="查詢(xún)" 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>" +
"</tr>";
}
tbody.innerHTML = str;
}
},
error: function () {
alert("查詢(xún)失敗")
}
});
});
});
做完之后感覺(jué)瞬間就踏實(shí)了不少，這個(gè)禮拜可以好好休息了。俺接觸這個(gè)又學(xué)到了一點(diǎn)前臺(tái)的知識(shí)了。
以上這篇json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS如何操作DOM基于表格動(dòng)態(tài)展示數(shù)據(jù)
- vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁(yè)功能
- mockjs+vue頁(yè)面直接展示數(shù)據(jù)的方法
- Vue.js 實(shí)現(xiàn)數(shù)據(jù)展示全部和收起功能
- jQuery插件jsonview展示json數(shù)據(jù)
- Springmvc處理ajax請(qǐng)求并返回json數(shù)據(jù)
- 使用fastjson中的JSONPath處理json數(shù)據(jù)的方法
- 如何處理后臺(tái)向前臺(tái)傳遞的json數(shù)據(jù)
- 對(duì)pandas處理json數(shù)據(jù)的方法詳解
- ajax請(qǐng)求后臺(tái)接口數(shù)據(jù)與返回值處理js的實(shí)例講解
- ajax處理返回的json格式數(shù)據(jù)方法
- js前端對(duì)于大量數(shù)據(jù)的展示方式及處理方法
相關(guān)文章
這篇文章主要介紹了解讀JSON的三種格式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了深入分析JSON編碼格式提交表單數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2015-06-06
工作中做了幾款自動(dòng)化測(cè)試工具都是跟日志讀取相關(guān)，日志格式又大多數(shù)都是JSON，所以這里把常用的JS操作JSON的方法做了總結(jié),需要的朋友可以參考下2020-12-12
json的定義、標(biāo)準(zhǔn)格式及json字符串檢驗(yàn)
今天分享和總結(jié)一些json的基本定義、格式、字符串的格式，以及在做測(cè)試的時(shí)候使用json時(shí)做一些簡(jiǎn)單的校驗(yàn)2014-05-05
這篇文章主要給大家介紹了任意Json如何轉(zhuǎn)成無(wú)序列表，文中給出了詳細(xì)的示例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法
今天小編就為大家分享一篇json數(shù)據(jù)傳到前臺(tái)并解析展示成列表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
json.stringify()與json.parse()的區(qū)別以及用處
這篇文章主要介紹了json.stringify()與json.parse()的區(qū)別以及用處,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
今天小編就為大家分享一篇json字符串傳到前臺(tái)input的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
JSON?WEB?Token是一種基于JSON的、用于在網(wǎng)絡(luò)上聲明某種主張的令牌，由三部分組成:?頭信息,?消息體和簽名，下面就一起來(lái)了解一下什么是JWT2023-05-05
js解析與序列化json數(shù)據(jù)(三)json的解析探討
這一節(jié)我們主要討論json的解析,感興趣的朋友可以了解下,JSON.parse()方法也可以接收另一個(gè)參數(shù)，該參數(shù)是一個(gè)函數(shù)，將早每個(gè)鍵值對(duì)上調(diào)用,好了，話不多說(shuō)，希望本文對(duì)你有所幫助2013-02-02