將json數據集合表格顯示
本文講述的是將後臺獲取到的json數據集合用表格的方式呈現到前端
第一次的時候，根據網上的教程，使用了js方法，對json集合進行遍歷後輸出，發現其較爲複雜，且輸出的時候因爲要在js里加入html語句，導致了一些問題。（由於表格語句是在js遍歷的時候用“innerHTML”輸出的，後來需要在表格中添加一些如按鈕等其他元素，而使用“innerHTML”語句本身就包含了引號，而html語句也需要引號，從而導致了許多不必要的麻煩）爲了減少這些麻煩，後再便採用了EL表達式的 foreach循環輸出，EL表達式可以直接在html語句中使用，既方便又快捷。下面上代碼
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: hasee
Date: 2017/8/16
Time: 14:47
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<table>
<tr>
<th>id</th>
<th>sql_name</th>
<th>sql_detail</th>
<th>description</th>
<th>刪除</th>
<th>修改</th>
</tr>
<c:forEach items="${data}" var="one" varStatus="num" >
<tr>
<td>${one.id}</td>
<td>${one.sqlName}</td>
<td>${one.sqlDetail}</td>
<td>${one.description}</td>
<%--<td><button type="button" class="del" onclick="del(${one.id})" href="/form/formsql/delete/data=">刪除</button> </td>--%>
<td>
<form class="del" action="/lab/form/formsql/delete" method="post">
<input type="hidden" name="id" value="${one.id}">
<input type="submit" value="刪除">
</form>
</td>
<td>
<form class="updated" action="/lab/form/formsql/updated" method="post">
<input type="hidden" name="id" value="${one.id}">
<input type="text" name="up">
<input type="submit" value="更新">
</form>
</td>
</tr>
</c:forEach>
</table>
<form id="insert" action="/lab/form/formsql/insert" method="post">
name:<input type="text" name="sqlname">
sql_name:<input type="text" name="detail">
description:<input type="text" name="desc">
<input type="submit" value="新增">
</form>
</body>
</html>
可以明顯看出，使用foreach後的代碼十分簡潔，且實用
<c:forEach items="${data}" var="one" varStatus="num" >
<tr>
<td>${one.id}</td>
<td>${one.sqlName}</td>
<td>${one.sqlDetail}</td>
<td>${one.description}</td>
</c:forEach>將後臺拿到的數據“data”類似與java中foreach一樣使用，不過改變了形式而已。
<td>
<form class="del" action="/lab/form/formsql/delete" method="post">
<input type="hidden" name="id" value="${one.id}">
<input type="submit" value="刪除">
</form>
</td>後面增加的“刪除”按鈕，採用的是post方法傳給後臺，因爲點擊按鈕的同時需要傳遞一些數據，在此採用的是隱藏框賦予其值
接着後面的“更新”與“新增”按鈕也都類似，只不過整個項目的數據均用json數組進行傳輸，因此輸入的內容在此也是json數組，思路也都一樣，一個按鈕，一個隱藏框獲取對應id（後臺比對數據庫），一個輸入框（json語句，獲取所需信息）
本文到此結束，純屬入門級新手經驗，如有錯誤請指出，不勝感激，有興趣亦可相互交流，謝謝！