2

私はgrailsで1つの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>

上記のコードで、ユーザー名のテキストボックスがフォーカスを失った場合、利用可能性を確認する必要があります.Google検索を少ししました.

ありがとう。

4

4 に答える 4

9

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

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>

もちろん、これを実装する方法はたくさんありますが、組み込みの ajaxy 機能のいくつかを使用するよりも jquery を好んでいるだけです。

于 2009-02-25T03:51:21.380 に答える
7

remoteFunctionメソッドを使用 することで、それを行うことができます。

于 2009-02-23T14:09:30.130 に答える
1

まず、ユーザー名の入力ボックスにイベントをバインドする必要があります。jQuery、mootools、またはその他の高品質のライブラリなどの JS ライブラリを使用することをお勧めします。

onblur のようなイベントを入力ボックスにバインドすると、サーバーにhttp GET リクエストを発行する関数を記述でき (例: /register/checkAvailability?username=ユーザー名はこちら)、応答はどこかに表示されます (場合によっては、入力ボックスの横にあります)。

于 2009-02-23T12:45:44.077 に答える