将 JS 代码从 grails 视图分离到外部 JS 文件时出现问题答案

【问题标题】：Issue when separating JS code from grails view to external JS file将 JS 代码从 grails 视图分离到外部 JS 文件时出现问题
【发布时间】：2014-04-24 21:05:31
【问题描述】：

我在创建和编辑视图的部分放置了一些有效的 JS 代码，它运行良好。

但是，当我尝试将代码移动到单独的 JS 文件时，代码将不再调用控制器操作。

这里是JS代码：

<g:javascript>
    $(document).ready(function(){
        <g:remoteFunction controller="project" action="ajaxGetClient" onSuccess="updateClient(data)"/>
    });
    function updateClient(data){
        var element = $("#project\\.client");
        element.empty();
        element.val(data.name);
    }
</g:javascript>

这是控制器动作：

def ajaxGetClient = {
    if(!params.id){
        params.id = Project.find("FROM Project ORDER BY id").id
    }
    def projectInstance = Project.get(params.id)
    render projectInstance?.client as JSON
}

这是 GSP 代码：

<g:textField name="project.client" id="project.client" maxlength="9" required="" disabled=""/>

<g:select id="project" name="project.id" from="${myPackage.Project.list()}" optionKey="id" required="" value="${productInstance?.project?.id}" class="many-to-one"
                    onchange="${
                        remoteFunction(
                            controller: 'project',
                            action: 'ajaxGetClient',
                            onSuccess: 'updateClient(data)',
                            params: '\'id=\' + this.value'
                    )}"
/>

我给ApplicationResources.groovy添加了一个资源，把上面的JS代码改成这样：

<g:javascript library="updateclient"/>

我只是简单地将代码复制/粘贴到一个 JS 文件中，然后收到一条消息：

Uncaught SyntaxError: Unexpected token

我的理解是因为它无法识别 GSP 语法，所以我尝试了一些 AJAX，我对此非常缺乏经验：

$(document).ready(function(){
    $.ajax({
        type: 'POST',
        url: "${remoteFunction(controller:'project', action:'ajaxGetClient', onSuccess:'updateClient(data)')}"
    });
});

这是我从浏览器控制台获得的信息：

http://localhost:8080/MyApp/product/$%7BremoteFunction(controller:'project',%20action:'ajaxGetClient',%20onSuccess:'updateClient(data)')%7D 404 (Not Found)

坦率地说，我现在很茫然。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery ajax grails

【解决方案1】：

这是因为 Javascript (.js) 和其他非 GSP (.gsp) 文件没有通过 Groovy 服务器页面引擎进行解析。因此，不会解析诸如或 ${g.remoteFunction} 之类的标记库。

然而，有几种方法可以实现这一点。

一种是将代码保留在您的 GSP 中，而不是将其外部化到 javascript 文件中。

第二个是将您的代码移动到 javascript 文件中，但在您的 GSP 文件中具有配置值。下面是一个非常简单的使用消息标签库的例子：

// inside the .js file
function myFunction() {
  console.log("I would use this value: "+_VALUE_FROM_GSP);
}

<script type="text/javascript">
// inside the .gsp file
var _VALUE_FROM_GSP = "${message(code: 'just.an.example')";
</script>

最后，有一些插件（如下所列）允许您指定要通过 Groovy Server Pages 引擎解析的一些资源（在您的情况下为 JavaScript 文件）。

GSP-arse plugin 和 GSP Resources

【讨论】：

我喜欢的另一个插件是 GSP 资源：grails.org/plugin/gsp-resources
我应该使用哪个插件，真的吗？
我无法回答这个问题，因为我不使用它们。我使用第二个选项。

【解决方案2】：

我将在这里回答我自己的问题，因为其中大部分来自我朋友的宝贵建议，但约书亚的回答也很重要，所以我最终将两者结合起来。

我就是这样解决的：

关于普惠制：

<script type="text/javascript">
    var _URL = '${resource(dir: "")}/project/ajaxGetClient';
</script>
<g:javascript library="updateclient"/>

我使用<script> 标记的原因是，为了使_URL 变量在不同的文件中可用，必须在文件使用它之前声明它。至少这就是其他 SO 答案所说的：

Global variables in Javascript across multiple files

单独的 JS 文件：

$(document).ready(function(){
    getClientAjax(null);
});
function getClientAjax(id) {
    $.ajax({
        url: _URL,
        type: "POST",
        data: { id: id },
        success: function(data) {
            updateClient(data);
        }
    });
}
function updateClient(data){
    var element = $("#project\\.client");
    element.empty();
    element.val(data.name);
}

并且控制器动作保持不变。

最后，必须创建另一个 JS 函数，但我得说我对结果很满意。

感谢大家的帮助。

【讨论】：