使用GRAILS中的ajax进行用户名可用性检查

Question

我正在使用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>

在上面的代码中,如果用户名文本框失去焦点,它应检查可用性.我做了一些谷歌搜索.但我无法得到我想要的.可以为此提供任何帮助或良好的教程吗？

谢谢.

Answer 1

Grails有一些很棒的内置ajax标签,但我更喜欢直接使用javascript库(即jquery)...

1. 下载jquery并复制到web-app/js/jquery.js

2. 在表单gsp或您的布局的head部分添加:

   <g:javascript src ="jquery.js"/>

3. 在你的gsp格式中,我建议在用户名的输入字段中添加一个id属性,这样可以更容易地通过id引用一个元素:

   <input type ="text"name ="username"id ="username"value =""/>

4. 在您的控制器方法中,您可以检查您的域/服务/等,以查看名称是否免费.下面是一个人为的例子,它将响应作为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}}"""
    }

    <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功能.

Answer 2

通过使用 remoteFunction方法,我们可以做到这一点.