在 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< /a> 并复制到 web-app/js/jquery.js

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

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

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}}"""
    }

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

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

Answer 2

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

Answer 3

您首先需要将一些事件绑定到用户名的输入框 - 我建议使用 JS 库，如 jQuery、mootools 或任何其他高质量库。

绑定一个事件，比如onblur，到输入框，你可以编写一个函数来发出< a href="http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback" rel="nofollow noreferrer">向您的服务器发送 http GET 请求（例如，/register/checkAvailability?username= 此处的用户名），响应将显示在某处（可能在输入框旁边）。

Answer 4

通过这些更改开箱即用。

$("#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();
                    }
                });
            }
        });
    });