Javascript ajax函数和Grails控制器_Javascript_Jquery_Ajax_Grails

Javascript ajax函数和Grails控制器

javascript jquery ajax grails

Javascript ajax函数和Grails控制器,javascript,jquery,ajax,grails,Javascript,Jquery,Ajax,Grails,我只是在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&

我只是在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>

问题是，当我点击按钮时，它什么也不做，但如果我再次点击它，它会在chrome控制台中打印下面的内容，问题是为什么第一次点击它就不起作用，为什么会打印两次响应

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

这里有几点需要指出

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);
                }
            });
        });
    });
}

让我们从逻辑开始。这是在创建一个函数，其中包含一个准备好的文档。这意味着当函数执行时，它将把函数交给documentready方法，该方法将延迟函数的执行，直到解析页面的主体并将其放入dom中

现在让我们看看html

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

现在，您的标记将只是您的标记，您的绑定将在页面加载后发生，并且只发生一次。

因此，这里有几点需要指出

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);
                }
            });
        });
    });
}

现在让我们看看html

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

现在，您的标记将只是您的标记，您的绑定将在页面加载后发生，并且只发生一次。

即使我对

$（文档）进行了注释。ready（）

仍然保持相同的行为即使我对

$（文档）进行了注释。ready（）

仍然保持相同的行为当我删除

onclick=“callAjax（）；”

当我点击按钮时，它什么也没做。你有小提琴吗。我上面给出的经过编辑的javascript应该是verbatum，而不是在函数中。刚刚被OPP包围，我忘了移除这部分。它现在工作得很好。当我删除

onclick=“callAjax（）；”

按钮时，当我单击它时，它什么也没做。你有小提琴吗。我上面给出的经过编辑的javascript应该是verbatum，而不是在函数中。刚刚被OPP包围，我忘了移除这部分。现在很好用。

    $(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);
                }
            });
        });
    });