Grails 使用 Ajax 更新表单中的值答案

【问题标题】：Grails updating values in form using AjaxGrails 使用 Ajax 更新表单中的值
【发布时间】：2015-06-08 19:29:39
【问题描述】：

我有两组单选按钮，第一组代表尺寸，第二组代表数量和价格。

当更改尺寸收音机已更改时，我正在尝试使用 Ajax 更新数量旁边的价格。

到目前为止我所拥有的。

<script>
     $(document).ready(function(){
        $("input[name*='size']").click(function() {
            ${remoteFunction(
                controller:'product', 
                action:'ajaxSize',
                params:'\'size=\' + this.value')}
        })  
     });
</script>
<g:formRemote name="myForm"
    url="[controller:'product', action: 'save']" update="updateMe">

    <input type="radio" name="size" value="2x2">2x2<br>         
    <input type="radio" name="size" value="4x4">4x4<br><br>

    <input type="radio" name="quantity" value="15">15 ${price}<br>
    <input type="radio" name="quantity" value="16">16 ${price}<br>
    <input type="radio" name="quantity" value="17">17 ${price}<br>

</g:formRemote>

控制器

def ajaxSize = {
    println params
    render params
}

@Transactional
def save(Product product) {
}

【问题讨论】：

标签： jquery grails

【解决方案1】：

我使用 Grails 2.5.0 编写了一个示例。此示例使用 GSP 模板在 AJAX 调用中呈现价格变化，请参阅下面的详细信息。

创建名为 _price.gsp 的 GSP 模板

模板是一个 GSP 文件，必须以下划线字符开头，并且没有 HTML 和 BODY 标签。在这种情况下，GSP 就是下面的代码：

<input type="radio" name="quantity" value="15">15 ${price}<br>
<input type="radio" name="quantity" value="16">16 ${price}<br>
<input type="radio" name="quantity" value="17">17 ${price}<br>

创建一个名为 ajaxSize.gsp 的 GSP

这是主要的 GSP，是一个完整的 HTML 文件。

请注意，此 GSP 包含使用 g:render 标签库的 _price.gsp 模板。

还需要注意的是，我将 g:render 放在了一个名为 updateMe 的 DIV 中。这是 g:remoteFunction 使用 setPrice 方法的返回（渲染）更新的 DIV。

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <asset:javascript src="application.js"/>
    <asset:stylesheet src="application.css"/>
    <title></title>
</head>

<body>
        <input type="radio" name="size" value="2x2">2x2<br>
        <input type="radio" name="size" value="4x4">4x4<br><br>

        <div id="updateMe">
            <g:render template="price"></g:render>
        </div>
</body>

<g:javascript>
    $(document).ready(function(){
        $("input[name*='size']").click(function() {
            ${remoteFunction(
                controller:'test',
                action:'setPrice',
                update: "updateMe",
                params:'\'size=\' + this.value')}
        })
    });
</g:javascript>

</html>

创建一个名为 TestController.groovy 的控制器

当模板被渲染时，您不需要在名称前加上下划线字符。您只需写下不带下划线的模板名称，请参见下面的 setPrice 中的渲染调用。

class TestController {

    def index() {}

    def ajaxSize() {
       return
    }

    def setPrice() {
        def price

        if (params.size=="2x2")
            price = "100"
        if (params.size=="4x4")
            price = "200"

        render template: "price", model: [price:price]
    }
}

测试解决方案

http://localhost:8080/myApp/test/ajaxSize

当调用 ajaxSize 操作时，会呈现 ajaxSize.gsp 的内容。之后，单击任何单选按钮 (name="size") 将生成对操作 setPrice 的 Ajax 调用。此操作将接收单击的单选按钮的值，并将呈现 _price.gsp 模板发送作为模型计算的价格。

【讨论】：

工作得很好，但您需要在正文标签中呈现 javascript。也许在 2.5.0 中是不同的，但在 2.4.4 中肯定是这样。谢谢。