我正在 grails 中做一个 Web 应用程序。现在我正在制作注册页面。在注册页面中，我想通过 ajax 检查用户名可用性。我可以编写用于在控制器或服务中检查用户名可用性的代码。我对如何通过 ajax 从客户端联系服务器。
我的示例 gsp 代码是
<g:form method="post" action="signup" controller="auth">
<input type="text" name="name" >
<input type="text" name="username" >
<input type="password" name="password" >
<input type="submit" value="signup">
</g:form>
在上面的代码中，如果用户名文本框失去焦点，它应该检查可用性。我做了一些谷歌搜索。但我无法得到我想要的。谁能为此提供帮助或好的教程？
谢谢。
【问题讨论】：
开箱即用地处理这些更改。
$("#username").bind("change paste keyup", function() {
$(function(){
// set onblur event handler
$("#username").bind("change paste keyup", function() { /*<<<<< !UPDATE THIS LINE!******/
// if some username was entered - this == #username
if($(this).length > 0) {
// use create link so we don't have to hardcode context
var url = "${createLink(controller:'user', action:'checkAvailable')}"
// async ajax request pass username entered as id parameter
$.getJSON( url, { id:$(this).val() }, function(json){
if(!json.available) {
// highlight field so user knows there's a problem
$("#username").css("border", "1px solid red");
// maybe throw up an alert box
alert("This username is taken");
// populate a hidden div on page and fill and display it..
$("#somehiddendiv").html("This ID is already taken").show();
}
});
}
});
});
【讨论】：
Grails 有一些很棒的内置 ajax 标签，但我更喜欢直接使用 javascript 库（即 jquery）...
下载jquery并复制到web-app/js/jquery.js
在表单 gsp 或布局的头部添加：
在您的表单 gsp 中，我建议您在用户名的输入字段中添加一个 id 属性，这样可以更轻松地通过 id 引用元素：
在您的控制器方法中，您可以检查您的域/服务/等以查看名称是否免费。下面是一个人为的示例，它以 JSON 形式返回响应，但您也可以返回 html 来填充 div，这取决于您希望如何提醒用户。
class UserController {
def checkAvailable = {
def available
if( User.findByUsername(params.id) ) {
available = false
} else {
available = true
}
response.contentType = "application/json"
render """{"available":${available}}"""
}
5、在你的表单中在头部添加 gsp
<script type="text/javascript">
// wait for dom to load
$(function(){
// set onblur event handler
$("#username").blur(function(){
// if some username was entered - this == #username
if($(this).length > 0) {
// use create link so we don't have to hardcode context
var url = "${createLink(controller:'user', action:'checkAvailable')}"
// async ajax request pass username entered as id parameter
$.getJSON(url, {id:$(this).val()}, function(json){
if(!json.available) {
// highlight field so user knows there's a problem
$("#username").css("border", "1px solid red");
// maybe throw up an alert box
alert("This username is taken");
// populate a hidden div on page and fill and display it..
$("#somehiddendiv").html("This ID is already taken").show();
}
});
}
});
});
</script>
当然有很多方法可以实现这一点，我只是碰巧更喜欢 jquery 而不是使用一些内置的 ajaxy 功能。
【讨论】：
通过使用remoteFunction 方法我们可以做到这一点。
【讨论】：
您首先需要将一些事件绑定到用户名的输入框 - 我建议使用 JS 库，如 jQuery，或 mootools，或任何其他高质量的库。
binding an event，和 onblur 一样，在输入框中，您可以编写一个函数，将a http GET request 发送到您的服务器（例如，/register/checkAvailability?username=此处的用户名），并且响应将显示在某处（可能在输入框旁边）。
【讨论】：