проверка доступности имени пользователя с помощью ajax в GRAILS

Question

Я делаю одно веб-приложение в Grails. Теперь я делаю страницу регистрации. На странице регистрации я хочу проверить доступность имени пользователя через 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. Но я не могу получить то, что хочу. Может ли кто-нибудь предоставить помощь или хороший урок для этого?

Спасибо.

Answer 1

В Grails есть несколько великолепных встроенных тегов ajax, но я предпочитаю использовать библиотеку javascript напрямую (а именно jquery) ...

1. Загрузите jquery и скопируйте в веб-приложение / js / jquery.js

2. В разделе заголовка вашей формы gsp или вашего макета добавьте:

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

Конечно, есть много способов реализовать это, я просто предпочитаю использовать jquery, а не некоторые встроенные функции ajaxy.

Answer 2

Используя метод remoteFunction , мы можем сделать это.

Answer 3

сначала вам нужно привязать какое-либо событие к полю ввода имени пользователя - я рекомендую использовать библиотеку JS, такую ​​как jQuery, или mootools, или любую другую высококачественную библиотеку.

связывая событие , например onblur, с полем ввода, вы можете написать функцию, которая выдает запрос 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();
                    }
                });
            }
        });
    });