javascript - 如何从 jsp 中列出数据库数据并将其打印出来？

Question

我正处于 web 开发的开始阶段。

我可以获得DBdata，但我不确定如何将其打印为列表。

我正在打印这个表格列表。

        SELECT
        seq_no,
        type_big_category,
        body,
        status
        FROM DB_TABLE;

并且列表输出在js文件中运行。

$(function() {

    $.ajax({
        url : "/dblistdata",
        type : "GET",
        dataType : "json",
        data: data,
        timeout: 10000
    }).done(function (result) {
        if(result.resultCode == "S000"){
            for (var i = 0; i < result.length; i++) {
                var tableBody =  '<tr>'
                        + '<td>' + result.messagelist[i].type_big_category + '</td>'
                        + '<td>' + result.messagelist[i].type_mid_category + '</td>'
                        + '<td>'
                        + '<label class="checkbox" for="checkbox' + i + '">'
                        + '<input type="checkbox" name="checkbox" id="checkbox' + i + '" checked="checked" />'
                        + '</label>'
                        + '</td>'
                        + '<td>'
                        +   '<textarea class="form-control push-text">"' + result.messagelist[i].body + '"</textarea>'
                        + '</td>'
                        + '<td>'
                        +   '<button type="button" class="btn btn-primary">save</button>'
                        +   '<button type="button" class="btn btn-default" id="deletebutton'+ i + '">delete</button>'
                        + '</td>'
                        + '</tr>';

                $('#tbody').append(tableBody);
                var btn[i] = document.getElementById('deletebutton[i]');
                btn[i].disabled = 'disabled';
            }
        }else{
            alert(result.resultMsg);
        }
    }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    })

});

而且我必须在 jsp 文件中显示列表。

<form class="smart-form">
    <table class="tb-regist" id="eeMsg">
        <thead>
            <tr>
                <th>Sortation</th>
                <th>situation</th>
                <th>check</th>
                <th colspan="2">message</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</form>

必须这样输出。你如何打印出来？请多多帮助。

Answer 1

我看到您正在使用 Java，所以您可能正在使用类似 servlet 的请求处理器。所以你至少有两种方法来表达你的观点，第三种只是我发现有用的建议:

• 将您的列表添加为 JSP 请求的属性并使用 JSTL
• 使用异步 javascript 请求(即获取或 XHR)获取列表
• 使用第三方库(如 Boostrap-tables)

将您的列表添加为 JSP 请求的属性并使用 JSTL

小服务程序

将您的列表添加到请求属性。

public void doGet( // or doPost
    HttpServletRequest req, 
    HttpServletResponse res
) throws ServletException, IOException  {
    List<Object> myList = new ArrayList<>();
    req.setAttribute("myList", myList);
}

JSP

使用 JSTL 遍历您的列表，并为表格的每一行的每个单元格调用您想要的任何对象属性。

<form class="smart-form">
    <table class="tb-regist" id="eeMsg">
        <thead>
            <tr>
                <th>Sortation</th>
                <th>situation</th>
                <th>check</th>
                <th colspan="2">message</th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${ myList }" var="object">
                <tr>
                    <td>${ object.seq_no }</td>
                    <td>${ object.type_big_category }</td>
                    <td>
                        <label class="checkbox" for="checkbox01">
                            <input type="checkbox" 
                                   name="checkbox" 
                                   id="checkbox01" 
                                   checked="checked" />
                            <i/>
                        </label>
                    </td>
                    <td>
                        <textarea class="form-control push-text">body</textarea>
                    </td>
                    <td>
                        <button type="button" 
                                class="btn btn-primary">
                            save
                        </button>
                        <button type="button" 
                                class="btn btn-default"
                                id='deletebutton'>
                            delete
                        </button>
                    </td>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</form>

不过不要忘记 JSTL 声明!

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

使用异步 javascript 请求(即获取或 XHR)获取列表

小服务程序

将您的列表添加到请求属性，但作为 JSON 格式，您可以使用来自 org.json 的 org.json.JSONArray图书馆。

public void doPost( // or doGet
    HttpServletRequest req, 
    HttpServletResponse res
) throws ServletException, IOException  {
    List<Object> myList = new ArrayList<>();
    JSONArray jsonArray = new JSONArray(myList);
    res.setContentType("application/json");
    res.getWriter().print(jsonArray);
    res.getWriter().flush();
    res.getWriter().close();
    res.flushBuffer();
}

JSP

只是静态 HTML，表格将使用 javascript 构建。

<form class="smart-form">
    <table class="tb-regist" id="eeMsg">
        <thead>
            <tr>
                <th>Sortation</th>
                <th>situation</th>
                <th>check</th>
                <th colspan="2">message</th>
            </tr>
        </thead>
    </table>
</form>

Javascript

将您的响应解析为 JSON 并迭代以使用 HTMLTableElement 构建您的表.

// XHR post function
var sendXHRPost = void 0;
{
    sendXHRPost = function (url, params, callback) {
        var http = new XMLHttpRequest();
        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                callback(http.status, http.responseText);
            }
        }
        http.send(params);
    }
}
// get your table data
var fetchTableData = void 0;
{
    fetchTableData = function () {
        sendXHRPost(
            'myURL', 
            // maybe you don't pass parameters to fetch your table?
            'parameterName=parameterValue', 
            function (responseStatus, responseText) {
                makeTable(responseStatus, JSON.parse(responseText);
            }
        );
    }
}
// formatter for your textarea cell
var textAreaCellFormatter = void 0;
{
    textAreaCellFormatter = function (rowId) {
        return '<textarea class="form-control push-text">'
            + rowId 
            + '</textarea>';
    }
}
// formatter for your buttons cell
var buttonsCellFormatter = void 0;
{
    buttonsCellFormatter = function (rowId) { 
        return  '<button type="button" '
            + 'class="btn btn-primary">'
            + 'save'
            + '</button>'
            + '<button type="button" '
            + 'class="btn btn-default" '
            + 'id="deletebutton'+rowId+'">'
            + 'delete'
            + '</button>';
    }
}
// build your table
var makeTable = void 0;
{
    makeTable = function (status, jsonResponse) {
        var table = document.getElementById("eeMsg");
        // Delete table content in case it was already loaded
        for (var i = 1 ; i < table.rows.length ; i++) {
            table.deleteRow(i); 
        }
        for (var i = 0 ; i < table.tBodies.length ; i++) {
            table.removeChild(table.tBodies[i]); 
        }
        // Create tbody
        var tBody = table.createTBody();
        // Handle internal server error
        if (status != 200) {
            var row = tBody.insertRow();
            var cell = row.insertCell(0);
            cell.colSpan = "4";
            cell.innerHTML = "Error while fetching data.";
        }
        // Handle no data found
        else if (jsonResponse.length === 0) {
            var row = tBody.insertRow();
            var cell = row.insertCell(0);
            cell.colSpan = "4";
            cell.innerHTML = "No data found.";
        }
        // All fine, build your table
        else {
            for(var i = 0 ; i < jsonResponse.length ; i++) {
                var row = tBody.insertRow();
                row.insertCell(0).innerHTML = jsonResponse[i].seq_no;
                row.insertCell(1).innerHTML = jsonResponse[i].type_big_category;
                row.insertCell(2).innerHTML = textAreaCellFormatter(i);
                row.insertCell(3).innerHTML = buttonsCellFormatter(i);
            }
        }
    }
}
// Execute your function on page loading.
(function () { fetchTableData(); })();

使用第三方库(如 Boostrap-tables )

小服务程序

同上。

JSP

<!-- libs and css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>
<!-- your table in your body, not builded yet -->
<table id="eeMsg"
       data-toolbar="#toolbar"
       data-toggle="table"
       data-pagination="true"
       data-search="true"
       data-url="yourFetchURLWithJSONResponse">
    <thead>
        <tr>
            <th data-field="seq_no">Sortation</th>
            <th data-field="type_big_category">situation</th>
            <th>check</th>
            <th colspan="2">message</th>
        </tr>
    </thead>
</table>