javascript - Grails如何让AJAX发送从模板表单中编辑的对象

Question

当另一个字段发生更改时，我想更新编辑表单中的一个字段。当 field1 更改时，AJAX 脚本将调用 Controller 来计算 field2 的新值，然后呈现更新该字段的模板。但 Controller 需要两个值，一个是field1的值，一个是编辑的对象。我需要它来渲染模板。

    <script>
        $(document).ready(function(){
            $( document ).on('change', '.availableCert', function ( event ){ 
                $.ajax({
                    url: '${g.createLink( controller:'offerDetail', action:'updatePrice' )}',
                    data: {availableCert:this.value, id:this.id},
                    type: 'get'
                }).success( function ( data ) { $( '#updatePrice' ).html( data );     });
            });
        });
    </script>

    <script>
        $(document).ready(function(){
            $( document ).on('change', '.adjustPrice', function ( event ){ 
                $.ajax({
                    url: '${g.createLink( controller:'offerDetail', action:'updatePrice' )}',
                    data: {adjustPrice:this.value, id:this.id},
                    type: 'get'
                }).success( function ( data ) { $( '#updatePrice' ).html( data );     });
            });
        });
    </script>

    <script>
        $(document).ready(function(){
            $( document ).on('change', '.volumeOffered', function ( event ){ 
                $.ajax({
                    url: '${g.createLink( controller:'offerDetail', action:'updatePrice' )}',
                    data: {volumeOffered:this.value, id:this.id},
                    type: 'get'
                }).success( function ( data ) { $( '#updatePrice' ).html( data );     });
            });
        });
    </script>

模板部分:

        <g:select class="availableCert" name="availableCert" from="${offerDetail.availableCert}" value="${offerDetail.choosedCert}" />    
</td>        
<td> FSC: ${offerDetail.priceFSC}</td>
<td> UC: ${offerDetail.priceUC}</td>
<td> CW: ${offerDetail.priceCW}</td>
<td> PEFC: ${offerDetail.pricePEFC}</td>
<td>  
    EndPrice:    ${offerDetail.endPrice}
</td>

因此，当 Controller 想要渲染此字段时，他需要拥有对象 ${offerDetail} 以使模板能够渲染它。

我看不出 javascript 如何检索该对象。但它可能比我想象的要简单得多？

Controller 代码:

def updatePrice() {
   def OfferDetail od
    if (params.id != null){
       od = OfferDetail.get(params.id)
   }
    if (params.availableCert != null) {
       od.choosedCert = params.availableCert
   } else if (params.adjustPrice != null) {
       od.priceAdjust = params.adjustPrice.toBigDecimal()
   } else if (params.volumeOffered != null) {
       od.volumeOffered = params.volumeOffered
   } else {}
   render template: "offerDData", model: [offerDetail:od]
}

Answer 1

我认为您可以使用下拉菜单简化您的方法，并使用单个 JavaScript 函数来处理所有下拉菜单更改，例如

<script>
    $(document).ready(function(){
        $( document ).on('change', '.odChange', function ( event ){ 
            $.ajax({
                url: '${g.createLink( controller:'offerDetail', action:'updatePrice' )}',
                data: {  updateVal :this.value, 
                         dropDownId: this.id,
                         offerDetailId: od.id
                      },
                type: 'get'
            }).success( function ( data ) { $( '#updatePrice' ).html( data );     });
        });
    });
</script>

<g:select class="odChange" name="availableCert" from="${offerDetail.availableCert}" value="${offerDetail.choosedCert}" />
<g:select class="odChange" name="adjustPrice" from="${offerDetail.adjustPrice}" value="${offerDetail.adjustPrice}" />
<g:select class="odChange" name="volumeOffered" from="${offerDetail.volumeOffered}" value="${offerDetail.volumeOffered}" />

值得考虑 data binding 的其他选项

例如现在你可以尝试:

def updatePrice() {
   def od = OfferDetail.get( params.offerDetailId )
   od."${params.dropDownId}" = params.updateVal
   od.save( flush: true, failOnError: true )
   render template: "offerDData", model: [offerDetail:od]
}

使用上述内容时，您的 gsp 字段名称与您的域的字段名称相匹配非常重要