Question

我有一些工作的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文件中，然后收到一条消息：

未捕获的SyntaxError：意外的令牌＆lt;

我理解它来自它没有认识到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)

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

Answer 1

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

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

一种方法是将代码保存在GSP中，而不是将其外部化为javascript文件。

其次是将代码移动到javascript文件中，但在GSP文件中包含配置值。以下是使用消息taglib的一个非常简单的示例：

// 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>

最后，插件（下面列出）允许您指定一些资源（在您的情况下为javascript文件），以通过Groovy Server Pages引擎进行解析。

GSP-arse plugin和GSP Resources

Answer 2

我会在这里回答我自己的问题，因为其中大部分来自我朋友的宝贵意见，但约书亚的答案也非常重要，所以我最后将两者结合起来

这就是我解决它的方法：

在GSP上：

<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函数，但我得说我对结果感到满意。

感谢您的帮助。

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

2 个答案: