проверка доступности имени пользователя с помощью 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>

В приведенном выше коде, если текстовое поле username потеряло фокус, оно должно проверить доступность.Я немного поискал в Google.Но я не смог получить то, что я хочу.Кто-нибудь может предоставить помощь или хороший учебник для этого?

Спасибо.

Answer 1

Используя Удаленная функция метод, которым мы можем это сделать.

Answer 2

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

1. Скачать jquery - jquery - запрос и скопировать в web-app/js/jquery.js

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

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

3. В вашей форме gsp я бы рекомендовал добавить атрибут id в ваше поле ввода для имени пользователя, чтобы упростить ссылку на элемент по идентификатору:

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

4. В вашем методе контроллера вы можете проверить свой домен / сервис / etc, чтобы узнать, свободно ли имя.Ниже приведен надуманный пример, который возвращает ответ в виде 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("Этот идентификатор уже взят").show();
            }
          });
        }
      });
    });
    </script>

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

Answer 3

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

привязка события, как и onblur, в поле ввода вы можете написать функцию, которая выдает http-запрос GET на ваш сервер (например, /register/checkAvailability?имя пользователя=имя пользователя здесь), и ответ будет где-то отображен (возможно, рядом с полем ввода).

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