JQuery AJAX с игрой 2

JavaScript:

$.ajax(ajaxParameters({
      url: '/ajax',
      success: function(data, textStatus, jqXHR) {
        window.alert(data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        window.alert(textStatus);
      }
    }));

Обратите внимание на URL — это приводит к вызову http: // localhost: 9000 / ajax, и поэтому должен появиться в файле маршрутов:

GET     /ajax                       controllers.Application.ajax()

Реализация на стороне сервера настолько проста, насколько это возможно:

public static Result ajax()
{
    return ok("Here's my server-side data");
}

Отвечая на ошибки

Посмотрите снова на JavaScript — вы увидите, что есть обработчики, объявленные для условий успеха и ошибок. Какая разница? Ответ 200 активирует обработчик успеха, а другие коды запускают обработчик ошибок. Давайте настроим код, чтобы показать, как это работает.

JavaScript. Единственное, что здесь изменилось, — это URL-адрес. Теперь он указывает на URL-адрес, который гарантированно возвращает ответ, отличный от 200.

$.ajax(ajaxParameters({
      url: '/ajaxWithError',
      success: function(data, textStatus, jqXHR) {
        window.alert(data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        window.alert(textStatus);
      }
    }));

Маршрут:

GET     /ajaxWithError              controllers.Application.ajaxWithError()

И реализация на стороне сервера:

public static Result ajaxWithError()
{
    return badRequest("Somehow, somewhere, you screwed up");
}

И это все — теперь вы обрабатываете условия успеха и ошибок.

Сокращенные методы

В jQuery полезны сокращенные методы, которые упрощают использование $ .ajax () и в некоторых случаях предоставляют дополнительные функции, такие как анализ данных отклика в объектах JSON или загрузка контента в элементы.

$ .Get ()

Неудивительно, что $ .get () предназначен для выдачи асинхронных GET на сервер. Вы можете предоставить параметры и дать одну функцию, которая будет выполняться в случае успешного вызова.

JavaScript:

$.get('/get',
      {'foo': 'bar'},
      function(data) {
          window.alert(data);
      });

Маршрут — обратите внимание, это не указывает параметр метода!

GET     /get                        controllers.Application.get()

Реализация на стороне сервера:

public static Result get()
{
    Map queryParameters = request().queryString();
    return ok(String.format("Here's my server-side data using $.get(), and you sent me [%s]",
                            queryParameters.get("foo")[0]));
}

Обработка ошибок

В реальном мире вы будете иногда получать ошибки, и вышеупомянутый JavaScript не справляется с этим. Ключ заключается в том, чтобы использовать функции обработки событий jQuery вместо предоставления обратных вызовов. В этом примере обрабатываются любые события успеха, ошибки и завершения, инициируемые $ .get ().

$.get('/getWithError')
      .success(function(data) {
        window.alert('Success: ' + data);
      })
      .error(function(data) {
        window.alert('Error: ' + data.responseText);
      })
      .complete(function(data) {
        window.alert('The call is now complete');
      });

Маршрут:

GET     /getWithError               controllers.Application.getWithError()

Реализация на стороне сервера:

public static Result getWithError()
{
    return badRequest("Something went very, very wrong");
}

$ .Post ()

Пока все хорошо, но что, если вы хотите отправить данные на сервер? Вы можете использовать $ .post () для этого. Интересно, что для DELETE, PUT и т. Д. Не существует сокращенных методов — для них нужно использовать метод $ .ajax ().

Семантика та же, что и для $ .get (), поэтому я не буду здесь приводить события. Это использует обычный обратный вызов.

JavaScript:

$.post('/post',
      {'foo':'bar'},
      function(data) {
          window.alert(data);
      });

Маршрут — обратите внимание, что используется HTTP-метод POST.

POST    /post                       controllers.Application.post()

И код на стороне сервера:

public static Result post()
{
    Map parameters = request().body().asFormUrlEncoded();
    String message = parameters.get("foo")[0];

    return ok(message);
}

$ .GetJSON ()

$ .getJSON () загружает данные в формате JSON с сервера, используя HTTP-запрос GET (чтобы украсть строку из документации jQuery). Это означает, что возвращенные данные могут быть немедленно обработаны как объект JSON без дальнейшей обработки.

JavaScript:

$.getJSON('/getJson',
          function(data) {
              // data is a JSON list, so we can iterate over it
              $.each(data, function(key, val) {
                  window.alert(key + ':' + val);
          });
       });

Маршрут:

GET     /getJson                    controllers.Application.getJson()

Серверный код:

public static Result getJson()
{
    List data = Arrays.asList("foo", "bar");
    return ok(Json.toJson(data));
}

$ .GetScript ()

$ .getScript () загружает скрипт с сервера с помощью HTTP GET, а затем выполняет его в глобальном контексте.

JavaScript:

$.getScript('/getScript');

Маршрут:

GET     /getScript                  controllers.Application.getScript()

Серверный код:

public static Result getScript()
{
    return ok("window.alert('hello');");
}

Обработка событий

Этот пример не может быть проще. Это может быть, однако, немного сложнее. События, генерируемые $ .getScript (), немного отличаются от событий success, error и т. Д. Других методов. Для $ .getScript () есть события done и fail . Для успеха вы должны использовать обратный вызов.

$.getScript('/getScriptWithError',
            function() {
                window.alert('This is the success callback');
            })
            .done(function(script, textStatus) {
                window.alert('Done: ' + textStatus);
            })
            .fail(function(jqxhr, settings, exception) {
                window.alert('Fail: ' + exception);
            });

Маршрут:

GET     /getScriptWithError         controllers.Application.getScriptWithError()

Реализация на стороне сервера. Обратите внимание, что возвращается ответ 200, но с неработающим JavaScript.

public static Result getScriptWithError()
{
    return ok("this is not a valid script!");
}

.load

Последний, но не менее важный .load () . Обратите внимание, что это не $ .load (), а $ (селектор) .load (), поскольку его целью является получение HTML-кода с сервера и размещение его в сопоставленном элементе.

JavaScript:

$('#loadContainer').load('/load');

Маршрут:

GET     /load                       controllers.Application.load()

Реализация на стороне сервера:

public static Result load()
{
    return ok(snippet.render());
}

Шаблон:

<div id="aTable">
    <table>
        <tr>
            <td>Foo</td>
            <td>Bar</td>
        </tr>
        <tr>
            <td>Hurdy</td>
            <td>Gurdy</td>
        </tr>
    </table>
</div>
<div id="aList">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
    </ul>
</div>

Загрузка фрагментов

.load () может принимать второй параметр в строке URL, разделенный пробелом. Этот параметр является селектором — если он присутствует, jQuery будет извлекать выбранный элемент из HTML и вставлять только тот, который находится в цели.

$('#loadFragmentContainer').load('/load #aList');

Обратите внимание, что здесь нет изменений в маршруте, коде на стороне сервера или шаблоне — это чисто клиентская операция.

Вот и все, ребята

jQuery упрощает выполнение вызовов AJAX, а Play упрощает прием и реагирование на эти вызовы. Идеальное совпадение!