使用 Javascript 生成包含 JSP 的 HTML

Posted 2023-02-26

【中文标题】使用 Javascript 生成包含 JSP 的 HTML

【英文标题】：Using Javascript to generate HTML that contains JSP

【发布时间】：2012-09-12 11:18:39

【问题描述】：

我正在使用 jsp、javascript 和 html 制作网页视图。我有一个元素列表，当单击时调用 javascript 函数 generatePictureSlider。这个想法是一组图片与列表中的每个元素相关联，并在单击其中一个元素时创建一个滑块。

这是创建我的列表的代码：

<div class="valg">
    <ol id="selectable">
    <c:forEach items="$kandidatliste" var="kjoretoy" varStatus="rowCounter">

        <li id="$rowCounter.index" class="ui-widget-content">
            <c:choose>
               /*Some code that displays content based on a variable in the kjoretoy var */
            </c:choose>

            <c:out value="Reg nr: $kjoretoy.kjennemerke "/>
            <c:out value="Score: $kjoretoy.score "/>
            <c:out value="Passering: $kjoretoy.passeringsString "/>                       

            <input id="removeVehicle" type="submit" value="X" />
            <input id="checkVehicle" type="submit" value="Sjekk"/>
        </li>   
    </c:forEach>        
    </ol>
</div> 

#selectable ol 绑定到 javascript 中的点击函数。这个点击函数是调用 generatePictureSlider 的函数。因此，当单击列表中的某个元素时，我想在滑块中显示与该元素关联的图片。

因此，我必须生成动态显示滑块的 html。

我的问题是我收到此错误：java.lang.NumberFormatException: For input string: "+parseInt(index)+"

这里的索引自然是被点击的元素的索引，它对应于视图从Java应用程序接收到的arraylist中元素的位置。这个数组列表称为“kandidatliste”，您将在下面的函数中看到。

function generatePictureSlider(index)
    $('div#switcher-panel').html('');

    var html = '<div id="container">'+
        '<div id="banner">'+
        '<ul class="bjqs">'+
        '<li><img src="/nonstop/bildekjennemerke=$kandidatliste['+parseInt(index)+'].kjennemerke&bildeNr=$0" title="$kandidatliste[0].kjennemerke_$0"  /></li>'+
        '</ul></div></div>';

    $('div#switcher-panel').append(html);               

如何让javascript变量index为整数，这样JSP不会崩溃，并显示与index index中元素关联的图片。

我当然愿意接受有关如何解决它的其他建议。本质是基于用户点击的元素，我想在页面上显示与该元素相关的图像和其他数据。

【参考方案1】：

JSP 页面在服务器端运行，并打印可能包含 Javascript 的 HTML 文档，另一方面，Javascript 在客户端的浏览器中运行，使用 javascript 生成 JSP 没有意义，因为它会在客户端的浏览器，它不会工作，因为 JSP 必须在服务器端解析，你需要在将它发送到客户端之前解决这个问题，你可以使用 Scriptlet，但我不推荐它，我不知道确切你的应用程序是如何工作的，但我会使用 ajax 动态加载图片。

如果您提供更多信息，我可以改进答案。

【讨论】：

我对jsp不是很熟悉。我以前用这种方法用javascript生成html，但从来没有用jsp“代码”生成html。我试图解释我在原始帖子中所追求的功能。我可以尝试用 jsp 中的更多代码更新我的 OP

你试过只使用索引，而不是 parseInt(index)？

当你这样做时： 当您说 $value 并将其附加到 html 文档中时，我知道这是在解释通过客户端的浏览器，我知道 $value 必须是来自客户端上下文的本地引用，我不熟悉 html 中的表示法，它应该怎么做？以及如何检索该参数？

当用户单击列表元素以从服务器获取元素数据然后显示给用户时，我最终重写了我的 JSP 以调用服务器。对我来说，这似乎有点不必要，因为数据已经存在，但它有效，所以我很高兴。我还进行了一些重组，以便元素列表和显示单击元素数据的显示面板位于两个单独的文件中。这样，当单击列表元素时，我不需要重新加载整个页面。更新列表时，显示面板中的数据也不会重置。