Überprüfung der Verfügbarkeit von Benutzernamen mit Ajax in GRAILS

Question

Ich tue eine Web-Anwendung in grails.now Ich mache signup page.in signup Seite möchte ich den Benutzernamen Verfügbarkeit über ajax.I kann den Code für Benutzernamen Verfügbarkeit Überprüfung in Controller oder service.I mit, wie man Server von Client-Seite über ajax kontaktieren zu schreiben.

Mein gsp-Beispielcode lautet

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

Im obigen Code, wenn der Benutzername Textbox den Fokus verloren, sollte es für availabity.I tat ein bisschen von google search.But ich konnte nicht bekommen, was ich will.Can jemand Hilfe oder gutes Tutorial für diese bieten?

Gracias.

Answer 1

Grails hat einige große in Ajax-Tags gebaut, aber ich ziehe es vor, eine Javascript-Bibliothek direkt (nämlich Jquery) zu verwenden...

1. Herunterladen jquery und kopieren Sie nach web-app/js/jquery.js

2. Fügen Sie im Kopfbereich Ihres Formulars oder Ihres Layouts hinzu:

   <g:javascript src="jquery.js"/>

3. In Ihrem Formular gsp würde ich empfehlen, ein id-Attribut zu Ihrem Eingabefeld für den Benutzernamen hinzufügen, macht es einfacher, ein Element durch id zu verweisen:

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

4. In Ihrer Controller-Methode können Sie Ihre Domäne/Dienst/etc überprüfen, um zu sehen, ob der Name frei ist. Unten ist ein konstruiertes Beispiel, das die Antwort als JSON zurückgibt, aber Sie könnten auch html zurückgeben, um ein div zu füllen, hängt nur davon ab, wie Sie den Benutzer alarmieren wollen.

   class UserController {
     def checkAvailable = {
       def available
       if( User.findByUsername(params.id) ) {
          available = false
       } else {
          available = true
       }
       response.contentType = "application/json"
       render """{"available":${available}}"""
   }

5, Fügen Sie in Ihrem Formular gsp im Kopfbereich

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

Natürlich gibt es viele Möglichkeiten, dies zu implementieren, ich bevorzuge nur zufällig Jquery gegenüber einigen der eingebauten Funktionen von Ajaxy.

Answer 2

Durch die Verwendung von remoteFunction Methode können wir das tun.

Answer 3

Sie müssen zunächst ein Ereignis an das Eingabefeld für den Benutzernamen binden - ich empfehle die Verwendung einer JS-Bibliothek wie jQuery oder mootools oder einer anderen hochwertigen Bibliothek.

Bindung eines Ereignisses wie onblur, auf das Eingabefeld anwenden, können Sie eine Funktion schreiben, die eine http-GET-Anfrage auf Ihrem Server (z. B. /register/checkAvailability?username= den Benutzernamen hier ), und die Antwort wird irgendwo angezeigt (möglicherweise neben dem Eingabefeld).

Answer 4

Mit diesen Änderungen können Sie sofort loslegen.

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