2

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

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

谢谢。

4

4 回答 4

9

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

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

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

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

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

于 2009-02-25T03:51:21.380 回答
7

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

于 2009-02-23T14:09:30.130 回答
1

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

将一个事件，如 onblur，绑定到输入框，您可以编写一个向您的服务器发出http GET 请求的函数（例如，/register/checkAvailability?username=此处的用户名），并且响应将显示在某处（可能位于输入框旁边）。

于 2009-02-23T12:45:44.077 回答
0

通过这些更改开箱即用。

$("#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();
                    }
                });
            }
        });
    });
于 2013-10-31T10:14:24.163 回答