ajax 函数和 Grails 控制器答案

【问题标题】：ajax function and Grails controllerajax 函数和 Grails 控制器
【发布时间】：2016-01-02 19:09:51
【问题描述】：

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

【问题讨论】：

即使我评论了$(document).ready() 仍然是相同的行为

标签： javascript jquery ajax grails

【解决方案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);
                }
            });
        });
    });
}

让我们从逻辑开始。所以这是创建一个包含准备好的文档的函数。这意味着当函数执行时，它将将该函数提供给文档就绪方法，该方法将延迟它的执行，直到页面的主体被解析并在 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);
                }
            });
        });
    });

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

【讨论】：

当我删除 onclick="callAjax();" 时，当我点击它时按钮什么也不做。
你有小提琴吗？我在上面给出的编辑后的 javascript 应该是逐字记录的，而不是在函数内部。只是被包围
opps，我忘了删除这部分。现在一切正常。