grails 注入 g:select 和 jQuery 处理程序

我有以下圣杯（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？

稍微修改一下你的代码，这里有一个例子（我相信）可以做到你的预期。以下是主要更改：

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

相关内容

最新更新

热门标签：