如何将带有 Servlet 的 JavaScript 代码移动到外部文件中？答案

【问题标题】：How to move JavaScript code with Servlets into external file?如何将带有 Servlet 的 JavaScript 代码移动到外部文件中？
【发布时间】：2017-06-01 06:50:34
【问题描述】：

我有一些带有 Servlets 代码的 JavaScript 代码，我想将它们全部（在之间）移动到外部 js 文件，但它不起作用，我该怎么办？如果只有部分 JavaScript 可以移动到外部文件，如何修改我的代码。

<script language="JavaScript" type="text/JavaScript">
var sel = document.getElementById('sel');
var selList = [];
<%
String key = "";
String text = "";

for(int i = 0; i < master.size(); i++) {
    Map option = (Map) master.get(i);
    key = (String) option.get("Code");
    text = key + " " + (String) option.get("NAME");
%>
    selList.push({
        key: "<%=key%>",
        text: "<%=text%>"
    }); 
<%
}
%>
</script>

【问题讨论】：

Using JSP code in JavaScript的可能重复
这并没有回答如何使用 servlet ...
那么你需要更具体一点。你想达到什么目的。（将其添加到您的问题中）
我修改了我的问题，你能帮帮我吗？
据我了解，您希望将其中包含一些嵌入式 JSP Java 的 Javascript 移动到单独的 .js 文件中。这正是重复问题的意义所在……

标签： javascript jsp servlets

【解决方案1】：

这里有两个选项：

1-不使用ajax

external.js

var images;

function renderImages(){
    //do things for showing images here.
    //images variable has images data as JSON (i suggest you this way) so you can easily iterate over list and render it.
}

jsp

<html>
<head>
<script type="text/javascript" src="external.js"></script>
<script>
    images = "<%=request.getAttribute("imageDataAsJSON")%>"; //here i assume you populate request variable with your image data in JSON format. Be careful about parse errors due to ' and ".
</script>

</head>
<body>
<script>
 renderImages();
</script>
</body>
</html>

2-通过使用 ajax（您可以将客户端逻辑分离到外部 js 代码中，并通过对服务器端进行 ajax 调用来填充数据。）

external.js

function renderImages(){
    //do ajax to your servlet which returns image data as JSON.
    //iterate over image data and render your html elements accordingly.
}

jsp

<html>
<head>
<script type="text/javascript" src="external.js"></script>
</head>
<body>
</body>
</html>

【讨论】：

我只想展示一张图片。如果按照你的方式，我是否必须修改我的逻辑？