She*_*rif 0 javascript ajax jquery 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>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"}
所以这里有几点要指出.
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);
}
});
});
});
现在你的标记只是你的标记,你的绑定会在页面加载后发生,而且只发生一次.
| 归档时间： |
|
| 查看次数： |
6755 次 |
| 最近记录： |