javascript - 如何将JavaScript变量传递给g:remoteFunction的 “update”属性？

Question

我在JavaScript中有一个函数，可以将消息提交到Grails Controller 中的方法，同时使用myID id更新div。

function messageKeyPress(field,event,messageBox) {
    ...
    var message = $('#messageBox').val();
        <g:remoteFunction action="submitMessage" params="\'message=\'+message" update="myID"/>
    ...
}

我这样使用它:

<div id="chatMessages" class="chatMessages"></div>
    <input type="text" id="messageBox" class="messageBox" name="message" onkeypress="messageKeyPress(this,event,'#messageBox');"/>
  <div id="myID">

我希望该功能可重用，能够更新不同的div。

我试过了:

onkeypress="messageKeyPress(this,event,'#messageBox', '#myID');"

在JavaScript中:

function messageKeyPress(field,event,messageBox, myID) {
...
<g:remoteFunction action="submitMessage" params="\'message=\'+message" update="${myID}"/>

但这没有用。我的问题是如何将JavaScript变量传递给Grails g:remoteFunction“更新”属性。

Answer 1

我建议您改用jQuery。默认情况下，它 bundle 在Grails项目中。结果，您将在javascript代码和gsp View 逻辑之间得到清晰的区分。例如，application.js可能如下所示:

(function($) {
    $('.messageBox').on('keypress', function () {
       ...
       var params = {message: $(this).val()};
       var url = $(this).data('url');
       var target = $(this).data('target');
       $.post(url, params, function(response) {
           $(target).html(response);
       });
       ...
    });
})(jQuery);

和您的 View 文件:

<input type="text" id="messageBox" 
       class="messageBox" name="message" 
       data-url="${createLink(action: 'submitMessage')}" 
       data-target="#myId"/>
<div id="myID"></div>

您应该为想要具有此事件侦听器的每个输入字段分配一个 messageBox css类。在每个字段的 data-target属性中，您可以为所有应更新的div指定一个选择器。

jQuery非常易于学习。 http://api.jquery.com/