ajax函数和Grails控制器

我只是在GSP中尝试ajax Jquery函数,这里是GSP:

<%@ page contentType="text/html;charset=UTF-8"%>

 


 







    test
    


 

    

这是控制器中的checkJquery操作:

def checkJquery() {
    def s=Book.get(params.id)
    render s as JSON
    }

当我点击按钮时它没有做任何事情的问题,但是如果我再次点击它会在Chrome控制台中打印下面的问题,为什么从第一次点击它不起作用,以及为什么打印响应两次.

Object {class: "test.Book", id: 1, author: "a1", bookName: "book1"}
Object {class: "test.Book", id: 1, author: "a1", bookName: "book1"}

Taplar.. 6

所以这里有几点要指出.

function callAjax(){
    $(document).ready(function(){
        $('button').click(function(){
            var URL="${createLink(controller:'book',action:'checkJquery')}";

            $.ajax({
                url:URL,
                data: {id:'1'},
                success: function(resp){
                    console.log(resp);
                    $("#author").val(resp.author);
                    $("#book").val(resp.bookName);
                }
            });
        });
    });
}

让我们从逻辑开始.所以这是创建一个包含文档就绪的函数.这意味着当函数执行它时会将函数提供给document ready方法,该方法将延迟执行它直到解析页面的主体并在dom中.

现在让我们来看看html.

test

这是定义一个按钮,单击它时将调用callAjax()方法.所以让我们遵循逻辑.您创建将在稍后执行的功能.您的页面将呈现并且按钮存在.

单击执行该方法的按钮.然后,该方法为文档提供了准备好等待页面解析的功能.但是......我们已经知道了.因为您基于与页面的交互来调用它.所以准备好的文件毫无意义.

另一点是,该调用将在每次单击该按钮时发生.这意味着您的方法将多次发生,这意味着您的绑定将多次发生,依此类推.

您应该考虑使用javascript而不是内联绑定,以便分离您的顾虑并最小化/消除冗余.

所以首先关闭html将改变为类似..

test

还有你的javascript ......

    $(document).ready(function(){
        $('.testMe').click(function(){
            var URL="${createLink(controller:'book',action:'checkJquery')}";

            $.ajax({
                url:URL,
                data: {id:'1'},
                success: function(resp){
                    console.log(resp);
                    $("#author").val(resp.author);
                    $("#book").val(resp.bookName);
                }
            });
        });
    });

现在你的标记只是你的标记,你的绑定会在页面加载后发生,而且只发生一次.

所以这里有几点要指出.

function callAjax(){
    $(document).ready(function(){
        $('button').click(function(){
            var URL="${createLink(controller:'book',action:'checkJquery')}";

            $.ajax({
                url:URL,
                data: {id:'1'},
                success: function(resp){
                    console.log(resp);
                    $("#author").val(resp.author);
                    $("#book").val(resp.bookName);
                }
            });
        });
    });
}

让我们从逻辑开始.所以这是创建一个包含文档就绪的函数.这意味着当函数执行它时会将函数提供给document ready方法,该方法将延迟执行它直到解析页面的主体并在dom中.

现在让我们来看看html.

test

这是定义一个按钮,单击它时将调用callAjax()方法.所以让我们遵循逻辑.您创建将在稍后执行的功能.您的页面将呈现并且按钮存在.

单击执行该方法的按钮.然后,该方法为文档提供了准备好等待页面解析的功能.但是......我们已经知道了.因为您基于与页面的交互来调用它.所以准备好的文件毫无意义.

另一点是,该调用将在每次单击该按钮时发生.这意味着您的方法将多次发生,这意味着您的绑定将多次发生,依此类推.

您应该考虑使用javascript而不是内联绑定,以便分离您的顾虑并最小化/消除冗余.

所以首先关闭html将改变为类似..

test

还有你的javascript ......

    $(document).ready(function(){
        $('.testMe').click(function(){
            var URL="${createLink(controller:'book',action:'checkJquery')}";

            $.ajax({
                url:URL,
                data: {id:'1'},
                success: function(resp){
                    console.log(resp);
                    $("#author").val(resp.author);
                    $("#book").val(resp.bookName);
                }
            });
        });
    });

现在你的标记只是你的标记,你的绑定会在页面加载后发生,而且只发生一次.