如何使用 JavaScript 访问传入的 Servlet 数据答案

【问题标题】：How to access incoming Servlet data with JavaScript如何使用 JavaScript 访问传入的 Servlet 数据
【发布时间】：2017-10-21 03:21:08
【问题描述】：

我正在制作一个 Web 应用程序，实际上使用的是 Java EE，所以模式是这样的。查询从 DAO 模式发送到数据库。查询的结果被传递给控制器，控制器（servlet）将结果查询传递给作为 JSP 页面的视图。

我一直在使用表达式语言来操作传入的 servlet 数据，但现在我想操作 googlechart 代码进行统计，我需要知道如何使用 Javascript 收集数据。

以下是一些细节：

这是 DAO 部分，选择票证类型并计算票证。

private static final String JPQL_SELECT_TICKETS_ETAT = "SELECT t.etat, COUNT(t.id_ticket) FROM Ticket t GROUP BY t.etat";

@PersistenceContext( unitName = "bdd_helpdesk_PU" )
private EntityManager       em;


public List<Object[]> chargerTicketsParEtat() throws DAOException {
    List<Object[]> liste;
    //List<Object[]> results = em.createQuery("").getResultList();
    TypedQuery<Object[]> query = em.createQuery(JPQL_SELECT_TICKETS_ETAT, Object[].class);
    //query.setParameter(PARAM_TICKET, id_ticket);
    try {
        liste = (List<Object[]>) query.getResultList();
    } catch ( NoResultException e ) {
        return null;
    } catch(Exception e) {
        throw new DAOException(e);
    }
    return liste;
}

下一个代码发生在 servlet 中：

        List<Object[]> lticket = ticketDao.chargerTicketsParEtat();
        String test= "this is a string";
        request.setAttribute("test", test);
        request.setAttribute("lticket",lticket);

这是 JSP 页面：

结果在表格中以数字表示，如下所示：

<table>
<tr>
<th>Etat ticket</th>
<th>Nombre</th>
</tr>
<c:forEach items="${lticket}" var="ticket">
<tr>
<td>${ticket[0]}</td>
<td>${ticket[1]}</td>
</tr>
</c:forEach>
</table>

这就是我要使用的那种哈特：

  <head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

如何收集 lticket 数据以便我可以将它们放在 googlechart 代码中。

【问题讨论】：

离回忆录截止日期只有两天了..

标签： javascript jsp servlets jakarta-ee google-visualization

【解决方案1】：

我在项目中的做法是使用 Gson 库将 List<Object[]> lticket 转换为 JSON，然后使用 request.setAttribute("lticketJson", json) 将其传递给 JSP。然后您可以在您的 JSP 中使用它，例如 chart.draw(${lticketJson}, options);

另一个选项是使用 JAX-RS 功能准备 REST 端点，该功能将仅提供 JSON 服务并使用 JavaScript fetch() 或类似方法使用结果。

【讨论】：