java - 我无法访问外部 javascript 文件中的 freemarker 变量

Question

当我将代码放入外部 javascript 文件时，我无法获取 freeMarker 变量的值

这是我的页面，里面有 javascript 代码，这是有效的，我可以通过这种方式获取我的 freemarker 变量的值:

<#import "../masterPage.html" as layout>
<@layout.masterPageLay bread1="my bread1" bread2="my bread2">

<#assign title="value 1"> 
<#assign subtitle="value 2"> 



<script>
function doAjaxPost() 
{
    var name= $('#name').val();
    var lastName= $('#lastName').val();



    var json = {"name" : name, "lastName" : lastName};
    console.log(json);

    var variableFreeMarker = "${freeMarkValue}";
    console.log('this value is: ' + variableFreeMarker); 

    $.ajax(
    {
        type: "POST",
        url: "myUrl",
        data: JSON.stringify(json), 

        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,

        beforeSend: function(xhr) 
                        {
                        xhr.setRequestHeader("Accept", "application/json");  
                        xhr.setRequestHeader("Content-Type", "application/json");  
                        },
        success: function(data) 
                {

                },
            error:function(data,status,er) { 
                alert("error: "+data+" status: "+status+" er:"+er);
            }
        /* error: function (xhr, ajaxOptions, thrownError) 
               {
                    alert(xhr.status);
                    alert(xhr.responseText);
                    alert(thrownError);
        }*/
    });
}

</script> 



    <form name="myform">
        Name in view:        <input type="text"  id="name" name="name">
        <br>
        Last Name in view:   <input type="text" id="lastName" name="lastName">
        <br>
        Show modify name in view:   <input type="text" id="modifyname" name="modifyname">
        <br>

        <input type="button" value="Add Users" onclick="doAjaxPost()">
    </form>

 <br>
 </@layout.masterPageLay>

但是如果我将我的 javascript 代码放在一个外部文件中，在这种情况下 myPageScript.js 然后在我的页面中调用该脚本我无法获得我的 freeMarker 变量的值这就是我的方式调用我的脚本

<script src="../resources/js/scripts/myPageScript.js"></script> 

这是我的页面，但无法正常工作

<#import "../masterPage.html" as layout>
    <@layout.masterPageLay bread1="my bread1" bread2="my bread2">

<#assign titulo="value 1"> 
<#assign subtitulo="value 2"> 

<script src="../resources/js/scripts/myPageScript.js"></script> 





    <form name="myform">
        Name in view:        <input type="text"  id="name" name="name">
        <br>
        Last Name in view:   <input type="text" id="lastName" name="lastName">
        <br>
        Show modify name in view:   <input type="text" id="modifyname" name="modifyname">
        <br>

        <input type="button" value="Add Users" onclick="doAjaxPost()">
    </form>

 <br>
 </@layout.masterPageLay>

我的 chrome 控制台中的这个输出 "${freeMarkValue}" 而不是变量的值

这是我的 Controller ，我正在使用 jquery ajax 处理表单

@RequestMapping(value = "myForm", method = RequestMethod.GET)
    public String myForm(Model model) {



        model.addAttribute("freeMarkValue", "controll");

        return "myForm";
    }
@RequestMapping(value = "myForm", method = RequestMethod.POST)
    public @ResponseBody String getTags(@RequestBody final String json, Model model) 
    throws IOException 
    {
         ObjectMapper mapper  =  new ObjectMapper();

         User objetmapped =  mapper.readValue(json, User .class);

         User person  =  new User  iox();
         person.setName(objetmapped .getName());
         person.setLastName(objetmapped .getLastName());

       );



         model.addAttribute("freeMarkValue", "second controller value");

         return toJson(objetmapped );
    }

    private String toJson(User person) 
    {
        ObjectMapper mapper = new ObjectMapper();
        try 
        {
            String value = mapper.writeValueAsString(person);
            // return "["+value+"]";
            return value;
        } 
        catch (JsonProcessingException e) 
        {
            e.printStackTrace();
            return null;
        }
    }

Answer 1

您可以将变量移动到 html 页面的脚本 block 中。

<#import "../masterPage.html" as layout>
<@layout.masterPageLay bread1="my bread1" bread2="my bread2">

<#assign titulo="value 1"> 
<#assign subtitulo="value 2"> 

<script src="../resources/js/scripts/myPageScript.js"></script> 

<script>
    // This variable can be accessed from myPageScript.js
    var variableFreeMarker = "${freeMarkValue}";
</script>

<form name="myform">
    Name in view:        <input type="text"  id="name" name="name">
    <br>
    Last Name in view:   <input type="text" id="lastName" name="lastName">
    <br>
    Show modify name in view:   <input type="text" id="modifyname" name="modifyname">
    <br>

    <input type="button" value="Add Users" onclick="doAjaxPost()">
</form>

或者将其添加为隐藏输入等的值。

<input type="hidden" id="myVal" value="${freeMarkValue}">

然后您的 JS(在单独的脚本中)将需要读取值，例如使用 jQuery。

var aValue = $("#myVal").val();

我对常见内容使用第一种方法，例如在每个页面上添加特定于用户的日期格式字符串。它们将具有全局范围，因此在命名时要小心。