通过选项卡以及jQuery和JSP加载替代内容 [英] Loading alternative content via tabs and jQuery and JSP

问题描述

我有一个策略类型的数据表(选项为单身"，夫妇"，家庭"和单亲家庭").我希望有一个选项卡式界面，每种策略类型都占用一个选项卡.同时，与相关策略类型有关的数据表显示在关联的选项卡下.当用户单击另一个选项卡时，将显示不同的数据表.

I have a table of data for a policy type (options are Single, Couple, Family & Single Parent Family). I want to have a tabbed interface with each policy type occupying one tab. At the same time a table of data relating to relevant policy type is displayed beneath the associated tab. When a user clicks on another tab then a different table of data is displayed.

我考虑过从数据库中导出数据，然后将其转换为XML，然后通过XSLT和/或jQuery将其解析为HTML.我认为这很简单，因为它只是一个简单的表.

I thought about exporting the data from the database then converting this to XML and therefore parsing this to HTML via XSLT and/or jQuery. I think this is overkill as it is just a simple table.

我想做的是在外部服务器页面上进行所有处理，在这种情况下是JSP，只是换出HTML块.因此，用户单击一个选项卡，该选项卡将调用外部JSP.然后，外部JSP检索相关选项卡的数据，构建表，然后将其显示在屏幕上.或者，外部JSP可以查询数据库，构建所有四个具有唯一ID的表，然后jQuery仅加载已被调用的表.最后，通过JSP构建四个单独的HTML，然后分别调用它们会更容易吗?老实说，我希望只用一种HTML.

What i would like to do is do all the processing on an external server page, in this case JSP and just swap out chunks of HTML. So the user clicks on a tab which calls the external JSP. The external JSP then retrieves the data for the relevant tab, builds the table and then this is displayed on screen. Or could the external JSP query the database, build all four table with a unique id each and then the jQuery loads only the table that has been called. Finally would it be easier just to have four seperate HTMLs build via JSP and then call them individually? I would prefer just one HTML to be honest.

我不知道如果表是根据JSP的请求构建然后提供给客户端的，那么它是否会破坏AHAH的对象.我还担心如果查询数据库并构建表，那么如果数据库数据发生更改，它将如何更新表的内容.

I don't know if it defeats the object of AHAH if the tables are built on request by a JSP and then served to the client. I was also concerned that if we query the database and build the tables then how will it be able to update the content of tables if the database data changes.

我认为这也可以在页面上完成，即建立4个表并用CSS显示隐藏与活动选项卡不相关的表:无，但我不确定可访问性-屏幕阅读器是否可以使用这些数据?

I thought also this could all be done on the page i.e. build 4 tables and hide the ones that don't relate to the active tab with CSS display:none but i wasn't sure about accessibility - would screen readers pick up this data?

抱歉，如果这样做没有道理，我觉得我可能正在尝试使这一过程变得过于复杂，但是我只是在尝试找出最佳方法.而且已经很晚了:(

Apologies if this does not make sense and i feel i may be trying to over complicate this but i am just trying to figure best approach. And it is late :(

推荐答案

您是否考虑过 JSON 格式?有Java API可将Javabean对象(的集合或映射)无缝转换为JSON格式，例如

Have you considered the JSON format? There are Java API's to seamlessly convert a (collection or map of) Javabean object(s) into JSON format, such as Google Gson. In JavaScript/jQuery you can handle JSON perfectly as if it's a worthfully JavaScript object. It is comparable with a Javabean in Java. No overheads like with formatting and parsing XML's.

您可以创建一个Servlet，该Servlet将JSON字符串写入响应中，以便jQuery的

You can create a Servlet which writes a JSON string to the response so that it can be called by jQuery's $.getJSON(). Here's a kickoff example where Item is a fictive Javabean with three properties id, name and value:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<Item> items = itemDAO.list();
    String json = new Gson().toJson(items);
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(json);
}

要在表格中显示这些项目，只需在jQuery中大致执行以下操作即可:

To display those items in a table, just do roughly like this in jQuery:

<script>
    $(document).ready(function() {
        $.getJSON('json/items', function(items) {
            $(items).each(function(i, item) {
                var row = $('#table').append('<tr>');
                row.append('<td>').text(item.id);
                row.append('<td>').text(item.name);
                row.append('<td>').text(item.value);
            });
        });
    });
</script>

...

<table id="table"></table>

仅此而已！希望这能提供新的见解.您可以在任何选项卡的click事件中使用它.如果相差不大，您甚至可以重用同一张表进行显示.只需预先执行$('#table').empty()即可删除所有行.

That's all! Hope this gives new insights. You can use this in the click event of any tab. You could even reuse the same table for display if that doesn't differ that much. Just do a $('#table').empty() beforehand to get rid of all rows.

修改:我忽略了一个重要的考虑因素:

Edit: I overlooked one important consideration:

但是我不确定可访问性-屏幕阅读器会读取这些数据吗?

but i wasn't sure about accessibility - would screen readers pick up this data?

屏幕阅读器不会执行任何JavaScript/CSS.如果这实际上是一个热门话题，那么您需要放弃JS/jQuery的想法，并在每个选项卡中使用普通的<a>链接进行普通香草"同步请求，并利用Servlet和JSP的JSTL/EL功能进行显示内容基于请求参数.

Screenreaders won't execute any JavaScript/CSS. If this is actually a showstopper, then you'll need to drop the JS/jQuery idea and go for "plain vanilla" synchronous requests with normal <a> links in each tab and take benefit of Servlet and JSP's JSTL/EL powers to display content conditionally based on the request parameters.

这篇关于通过选项卡以及jQuery和JSP加载替代内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！