Question

我只是在GSP中尝试ajax Jquery功能，这里是GSP：

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="layout" content="main" />
 <title>Insert title here</title>

<g:javascript library='jquery' plugin='jquery' />

<script type="text/javascript">
 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)

    }
  });
});

 });
}


</script>

</head>
<body>
    <button class="testMe" onclick="callAjax();">test</button>
    <div class="body" id="divBody">

 <g:textField name="author" id="author"/>
<g:textField name="book" id="book"/>
    </div>
</body>
</html>

这是控制器中的 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"}

Answer 1

所以这里有几点要指出。

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。

<button class="testMe" onclick="callAjax();">test</button>

这是定义一个按钮，单击它时将调用callAjax（）方法。所以让我们遵循逻辑。您创建将在稍后执行的功能。您的页面已呈现，按钮已存在。

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

另一点是，每次点击该按钮都会发生这种呼叫。这意味着您的方法将多次发生，这意味着您的绑定将多次发生，依此类推。

您应该考虑使用javascript而不是内联绑定，以便将您的问题分开并最小化/消除冗余。

所以首先关闭html会改变为......

<button class="testMe">test</button>

和你的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);
                }
            });
        });
    });

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

ajax函数和Grails控制器

1 个答案: