Question

我试图将Ajax请求添加到我的java Maven项目中，该项目是MVC项目，由HTML完成视图，模型和控制器由java创建。所以我尝试从超过40k的数据中获取数据 - 设置为HTML端使用DataTable和Ajax请求

我使用WebServlet创建json对象

@WebServlet("/PaginationServlet")
public class PaginationServlet extends HttpServlet {

    /**
     * @see HttpServlet#HttpServlet()
     */
    public PaginationServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request,
     * HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
        response.setContentType("application/json");


        ChgResponse transactionsRes = LevelTwoDataLoader.loadAllTransactions();

        if (transactionsRes.isSuccess()) {

            List transactions = (List<ChgLevelTwoTransaction>) transactionsRes.getReturnData();
            //modelAndView.getModel().put("transactions", transactions);

            List allInactiveCustomersBeanList = AllTransactionsBean.getBeanList(transactions, DomainBeanImpl.TransactionID);
            Gson gson = new GsonBuilder().setPrettyPrinting().create();
            String json2 = gson.toJson(allInactiveCustomersBeanList);
            System.out.print(json2);
        }

    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request,
     * HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
        // TODO Auto-generated method stub
    }


}

我添加了custom.js，使用Ajax和DataTable

将数据加载到表中

$(document).ready(function() {

    $("#allAdminTransaction").DataTable( {
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": false, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once

        "ajax": {
            "url": "/PaginationServlet",
            "type": "POST",
            "datatype": "json"
        },

        "columns": [
            { "data": "trsID","name":"trsID","autoWidth": true },
            { "data": "startTime","name":"startTime","autoWidth": true },
            { "data": "endTime","name":"endTime","autoWidth": true },
            { "data": "trsStatus","name":"trsStatus","autoWidth": true },
            { "data": "rfID","name":"rfID","autoWidth": true },
            { "data": "customerUserName","name":"customerUserName","autoWidth": true },
            { "data": "amount","name":"amount","autoWidth": true },
            { "data": "networkRef","name":"networkRef","autoWidth": true },
            { "data": "networkOwner","name":"networkOwner","autoWidth": true },
            { "data": "chgPointRef","name":"chgPointRef","autoWidth": true },
            { "data": "chgPointOwner","name":"chgPointOwner","autoWidth": true },
            { "data": "energyConsumption","name":"energyConsumption","autoWidth": true },
            { "data": "sessionTime","name":"sessionTime","autoWidth": true },
            { "data": "balance","name":"balance","autoWidth": true },
            { "data": "Options","name":"Options","autoWidth": true },
        ]
    });

});

最后是HTML

    <section class="content-header">
    <h1 th:text="#{view.all.trs}">
        Widgets
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <div id="totalOfColumn"></div>
                    <a target="new" th:href="@{/AllTransactionsByMonthPrint.html(selectDuration=${selectDuration})}"><h3 align="right" th:text="#{print.all.transactions}"></h3></a>
                    <table id="allAdminTransaction" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>StartTime</th>
                                <th>EndTime</th>
                                <th>Status</th>
                                <th>NFCReference</th>
                                <th>CustomerName</th>
                                <th>ChargeAmount</th>
                                <th>NetworkName</th>
                                <th>NetworkOwner</th>
                                <th>ChargePointName</th>
                                <th>ChargePointOwner</th>
                                <th>EnergyConsumption</th>
                                <th>SessionTime</th>
                                <th>Balance</th>
                                <th>Options</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

但数据未显示HTML端

Answer 1

而不是System.out.print（json2）使用：

PrintWriter out = response.getWriter();
out.println(json2);

我正在尝试将javascript添加到java Mave项目中

1 个答案: