ajax - 在 GRAILS 中使用 ajax 检查用户名可用性

Question

我正在 grails 中做一个 Web 应用程序。现在我正在制作注册页面。在注册页面中，我想通过 ajax 检查用户名可用性。我可以在 Controller 或服务中编写用户名可用性检查代码。我对如何通过 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 或布局的头部添加:

3. 在您的 gsp 表单中，我建议在您的用户名输入字段中添加一个 id 属性，这样可以更轻松地通过 id 引用元素:

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

4. 在您的 Controller 方法中，您可以检查您的域/服务/等以查看名称是否可用。下面是一个以 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的head部分添加

    <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("<em>This ID is already taken</em>").show();
            }
          });
        }
      });
    });
    </script>

当然有很多方法可以实现这个，我只是碰巧更喜欢 jquery 而不是使用一些内置的 ajaxy 功能。