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）......

下载jquery并复制到web-app / js / jquery.js
在表单gsp或您的布局的head部分添加：

＆lt; g：javascript src =“jquery.js”/＆gt;
在你的gsp格式中，我建议在用户名的输入字段中添加一个id属性，以便更容易通过id引用元素：

＆lt; input type =“text”name =“username”id =“username”value =“”/＆gt;
在您的控制器方法中，您可以检查您的域/服务/等，以查看名称是否免费。下面是一个人为的例子，它将响应作为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功能。

Answer 2

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

Answer 3

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

binding an event，就像onblur一样，在输入框中，你可以编写一个向你的服务器发出a http GET request的函数（例如，/ 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();
                    }
                });
            }
        });
    });

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

4 个答案: