已编译和执行的javascript程序之间的区别

Question

我们可以称之为这个问题的深化。

我们仍在使用 Java 1.8 的 Spring Boot 项目中，问题是将链接问题中描述的逻辑应用到同时执行许多其他操作的预先存在的程序中。 流程结构也可能有问题，所以仍然欢迎任何建议。

无论如何，流程如下：

• 在作为入口点的main.html页面上，有一个调用端点的按钮：

@GetMapping(value = {"/getConsole"})
public String getConsole(HttpSession session) {
    Console console = service.setupConsole();
    session.setAttribute("console", console);
    return "console";
}

在服务中，Console 对象填充了多个字段，我们对此分析感兴趣的是 3 个字段，它们都是字符串列表。

• “console.html”页面使用 thymeleaf 包含：带有 CDN 的片段

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

正文中包含一个样式表（不应影响流程）和 3 个 html 页面。

• 在这 3 个包含的 html 页面之一中，有一个带有选择的卡片，它会触发 AJAX 调用并传递所做的选择，接收相同 html 页面作为响应，但填充了一些字段（每个选项不同）。

处理此操作的召回端点也包含有问题的模型：

@GetMapping(value = {"/getCompiledPage"})
public String getCompiledPage(@RequestParam("type") String type, Model model, HttpSession session) {

    MyPage selectedPage = service.getSelectedPage(type, ((Console) session.getAttribute("console")).getPages());

    if (selectedPage == null) {
        log.error("selectedPage is not valid");
        return "error";
    }
    
    model.addAttribute("selectedPage", selectedPage);
    model.addAttribute("inputs", getFieldNamesExcluding(Arrays.asList("title", "type", "link", "referenceDates")));

    return "templatePage";
}

它调用的页面显然与进行 AJAX 调用的页面相同，因为它返回答案。

• 在同一页的末尾，我在主体逻辑的 div 末尾插入了以下代码片段：

<button type="button" onclick="start()">Press here</button>

<script th:inline="javascript">
    function start() {
        /*<![CDATA[*/
            var inputs= /*[[${inputs}]]*/ 'default';
            console.log("inputs: ",inputs);
        /*]]>*/
    }
</script>

当我访问页面并选择我感兴趣的类型选项时，我实际上填写了页面（我已使用 console.log 检查过它），其中包含以下特定部分：

<button type="button" onclick="start()">Press here</button>

<script>
    function start() {
        /*<![CDATA[*/
            var inputs= ["countries","inputTypes","tableNames"];
            console.log("inputs: ",inputs);
        /*]]>*/
    }
</script>

所以我告诉自己这个过程应该是正确的。

相反，一旦我单击按钮（我放置该按钮只是为了测试功能，否则我需要在另一个脚本中使用该字符串列表的值），我得到：

inputs:  null

将此正文放在“源”中（可通过浏览器分析工具访问）：

<button type="button" onclick="start()">Press here</button>

<script>
    function start() {
        /*<![CDATA[*/
            var inputs= null;
            console.log("inputs: ",inputs);
        /*]]>*/
    }
</script>

我希望编译页面和运行页面之间没有区别，但它改变了模型和 JavaScript 之间通信的一切。虽然在一开始的问题中，逻辑几乎相同，但得到的结果是正确的。

基本上，我希望 console.log 显示字符串列表，让我确信该模型从控制器正确到达 html 页面，然后我可以将其用于其他脚本。

Answer 1

愚蠢的错误。

当然，以如此明确的方式写下问题也帮助我找到了解决方案。

问题在于 AJAX 调用的响应在成功时被处理，以仅更新页面中的特定 div。 因此，通过从外部插入脚本，它不会被提名更新。