有没有办法从 javascript 函数中调用控制器操作？

Posted 2023-05-07

【中文标题】有没有办法从 javascript 函数中调用控制器操作？

【英文标题】：Is there a way to call a controller action from a javascript function?

【发布时间】：2012-08-05 17:43:52

【问题描述】：

我有一个 grails 项目，我需要选择要删除的字段，当我单击删除时，我需要一个函数来删除所有选定的项目：

html代码：

<form name="bookForm" action="list" method="post">
    ....
    <a onclick="deleteBooks();">Delete</a>
    ....
    ....
    <g:checkBox id="select_all" name="select_all" value="" onclick="selectAll();" />
    ....
    <g:each in="$bookList" status="i" var="bookInstance">
        <tr class="$(i % 2) == 0 ? 'odd' : 'even'">
            <td><g:checkBox id="$bookInstance.id" name="delete_checkbox" value="" /></td>
        </tr>
    </g:each>
    ....
</form>

javascript 代码：

<script type="text/javascript">
    function selectAll()
        var select = document.getElementById("select_all");
        var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
        if (select.checked)
            for (i = 0; i < checkboxes.length; i++) checkboxes[i].checked = true;
        else
            for (i = 0; i < checkboxes.length; i++) checkboxes[i].checked = false;
        
    

    function deleteBooks()
        var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
        var counter = 0;
            for (i = 0; i < checkboxes.length; i++)
                if(checkboxes[i].checked)
                    counter ++;
                    $g.remoteFunction(action:'delete', controller:'book', id:checkboxes[i].id) 
                
            
            if (counter == 0) alert("select books to delete");
        
    </script>

selectAll 函数工作正常，但 deleteBooks 函数在我添加时会导致此错误 $g.remoteFunction(action:'delete', controller:'book', id:checkboxes[i].id)

例外：

Error 500: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book', id: checkboxes[i].id)] on line [26]: Cannot get property 'null' on null object
Servlet: grails
URI: /myProject/grails/book/list.dispatch
Exception Message: Cannot get property 'null' on null object 
Caused by: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book', id: checkboxes[i].id)] on line [26]: Cannot get property 'null' on null object 
Class: list.gsp 
At Line: [26] 
Code Snippet:

如果我用$g.remoteFunction(action:'delete', controller:'book') 代替它

例外：

Error 500: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book')] on line [27]: No javascript provider is configured
Servlet: grails
URI: /myProject/grails/book/list.dispatch
Exception Message: No javascript provider is configured 
Caused by: Error evaluating expression [g.remoteFunction(action:'delete', controller:'book')] on line [27]: No javascript provider is configured 
Class: list.gsp 
At Line: [27] 
Code Snippet:

如何从 javascript 函数或 jquery 调用控制器操作？

【参考方案1】：

function deleteBooks()
    var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
    var counter = 0;
    for (i = 0; i < checkboxes.length; i++)
        if(checkboxes[i].checked)
              counter ++;
              var bookId = checkboxes[i].id;
              <g:remoteFunction controller="book" action="delete" id="$bookId" /> 
        
    
    if (counter == 0) alert("select books to delete");

如有错误请通知我

【参考方案2】：

GSP 在服务器端工作，JavaScript 在客户端工作。不能混用，用ajax：

$.ajax(
   type: 'POST',
   url: "$createLink(action:'delete', controller:'book')/" + checkboxes[i].id
);

【讨论】：

请在 deleteBokks() 函数中混合您的代码，因为我尝试过但它没有解决我的问题（它没有给出任何错误，但它没有调用控制器操作

好的，我明白了。它是 jQuery 函数（我强烈建议您使用 jQuury 或任何其他现代 js 框架）。如果不想使用jquery，可以自己实现ajax调用——见blog.mgechev.com/2011/07/21/ajax-jquery-beginners

你看到了我的代码。能否请您为我的问题写一个完整的答案？

对不起，我不是专家，我只能告诉你如何通过使用普遍接受的框架来达到它，如果你需要低级 js 代码，最好提出一个全新的问题，比如“如何使用纯 JS 发出 ajax 请求，无需任何框架"

【参考方案3】：

remoteFunction 很好，但是你需要一个 javascript 库。查看http://grails.org/plugin/jquery 以及如何安装它。

【讨论】：

不要忘记在循环中获取checkboxes[i].id 的值

【参考方案4】：

如果您编写 javascript 内联，则可以这样做。但是，如果 javascript 在您包含的文件中 - 它将不起作用。你也不需要“g”。在 remoteFunction 中。

【讨论】：

不要忘记在循环中获取checkboxes[i].id 的值