Grails 注入 g:select 和 jQuery 处理程序答案

【问题标题】：Grails injection of g:select and jQuery handlerGrails 注入 g:select 和 jQuery 处理程序
【发布时间】：2015-01-06 15:58:39
【问题描述】：

我有以下 Grails (2.3.6) POGO：

class Pet {
    Long id
    String name
    PetType type
}

还有以下控制器：

class PetController {
    def index() {
        List<Pet> pets = PetLoader.loadAllPets()
        render(
            view: "listPets",
            model: [
                pets: pets
            ]
        )
    }

    def loadPet() {
        Long petId = params.petId   // Pet#id
        // Do stuff with the 'petId'.
    }
)

并在各自listPets.gsp的正文中：

<body>
    <h1>Select a pet to edit below:</h1>

    <g:select id="pets"
        name="pets"
        from="${pets}"
        value="${pet.name}"
        optionKey="id" />

    <g:javascript>
        var ajaxAction = "${createLink(controller:'pet',action:'loadPet')}"
        $("#pets").on('change', function() {
            $.get(
                url: ajaxAction,
                data: $("#pets").val(),
                success: function(data, status) {
                    alert("Success!\n" + data);
                },
                dataType: "json"
            );
        });
    </g:javascript>
</body>

当我运行这段代码时，我得到一个空的<g:select>，显然没有正确注入/配置。我想做的是这样的：

当页面加载时，整个users 列表被注入<select id="pets"> 下拉列表并显示Pet#name 字符串作为选项文本；那么
当用户从下拉列表中（在 UI 中）选择一个新的Pet 时，jQuery 处理程序会触发对loadPet 的异步调用；那么
在loadPet 内部，我需要通过params 对象访问下拉列表中所选值的Pet#id，以便我可以在后端使用该宠物ID 做其他事情

我很难从这里的树林中看到森林。我确定我搞砸了<g:select> 标签。但我可能还需要更改控制器和/或 jQuery 脚本。所以我问：我需要对我的代码进行哪些更改，以便用Pet#name 填充选择，但是，当从jQuery 调用loadPets 时，我可以从params 访问Pet#id？

【问题讨论】：

标签： jquery grails gsp

【解决方案1】：

稍微修改您的代码，这是一个（我相信）符合您预期的示例。以下是主要变化：

在g:select内，使用optionValue和optionKey控制显示字符串和基础<option> 值。有关更多详细信息和示例，请参阅：http://grails.org/doc/latest/ref/Tags/select.html
您的 jQuery 代码使用 .get() 简写，但使用 .ajax() 参数语法。两者都可以工作，但函数参数存在差异。看： http://api.jquery.com/jquery.get/
我包含了一个指向 jQuery 的 CDN 链接。这对于快速测试很有用，但还有多种其他方法可以包含 jQuery 库（您可能已经在项目中配置了它）
createLink 被 raw() 包裹，以确保生成的 URL 不会被转义。

更新代码：

Pet 或 PetController 没有变化

listPets.gsp

<!DOCTYPE html>
<html>
  <head>
  <meta name="layout" content="main"/>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <h1>Select a pet to edit below:</h1>

    <g:select id="pets"
        name="pets"
        from="${pets}"
        optionKey="id"
        optionValue="name" />

    <g:javascript>
        var ajaxAction = '${raw(createLink(controller:'pet',action:'loadPet'))}';
        $("#pets").on('change', function() {
            $.ajax({
                url: ajaxAction,
                data: { petId: $("#pets").val() },
                success: function(data, status) {
                    alert("Success!\n" + data);
                }
            });
        });
    </g:javascript>

</body>
</html>

【讨论】：