Играть 2.x: Как сделать запрос AJAX с помощью общей кнопки

таким образом, я успешно получил ajax-запросы для работы раньше, но мне всегда приходилось использовать форму, а затем в конце отправки возвращать false, чтобы он не обновлял страницу.

Я также недавно переместил свой javascript в отдельный файл, что вызвало сбой моих команд@. Из-за этого я не знаю, как установить мой url на мой маршрут?

Html:

<button id="saveAsDefaultButton">Save as default</button>

Playframework java код:

public static Result saveDefaultPhoneForUser(String handset) {
    User currentUser = User.findByName(session("name"));
    currentUser.lastControlledHandset = theHandset;
    currentUser.save();
    return ok();
}

маршруты:

POST    /                           controllers.Application.saveDefaultPhoneForUser(handset : String)

javascript:

$('#saveAsDefaultButton').click(function(evt) {
        $('#errors').hide();
        $.ajax({
            type : 'POST',
            url : "controllers.Application.saveDefaultPhoneForUser",
            data : $('#controlledPhone option:selected').text(),
            dataType : "text",
            success : function(data) {
                //setError('Call succedded');
                //$('#test1').attr("src", data)
            },
            error : function(data) {
                setError('Make call failed');
            }
        });
        return false;
    });

Я уверен, что есть способ сделать это, мне просто не повезло найти что-нибудь. Любая помощь сильно истощена.

5 58
javascript playframework-2.0 ajax routes

5 ответов:

для этой работы вы должны пойти с javascriptRoutes поскольку он генерирует правильные пути JS на основе ваших маршрутов.конф. Вы найдете пример использования в Zentask пример

в любом случае, теперь вы можете исправить свой вызов AJAX, изменив url до

url : '@routes.Application.saveDefaultPhoneForUser()',

этот способ требует, чтобы он поместил весь JS в шаблон, что неверно. Он может или даже должен быть перемещен в отдельный файл JS, и чтобы сделать это возможным, вам нужно использовать javascriptRoutes.

больше...

javascriptRoutes не описаны пока в официальной документации, но вот пошаговое введение в нее. Хотя описание выглядит изощренным де-факто использование этого способа приносит много преимуществ.

1. Создайте общие маршруты

сначала вам нужно создать общие маршруты в conf/routes файл:

GET     /item/:id     controllers.Application.getItem(id: Long)
POST    /item/new     controllers.Application.newItem
PUT     /item/:id     controllers.Application.updateItem(id: Long)

конечно, вам нужно создать по крайней мере эти три действия в :

  • getItem(Long id){ ... }
  • newItem() { ... }
  • updateItem(Long id) { ... }

2. Создайте действие, переводящее общие маршруты в JS

  • поместите его где-нибудь, т. е. в вашем Application контроллер
  • назовем это javascriptRoutes()

в этом действии вы укажете существующей маршруты от conf/routes file

public static Result javascriptRoutes() {
    response().setContentType("text/javascript");
    return ok(
        Routes.javascriptRouter("myJsRoutes",
            routes.javascript.Application.getItem(),
            routes.javascript.Application.newItem(),
            routes.javascript.Application.updateItem(),
            //inside somepackage
            controllers.somepackage.routes.javascript.Application.updateItem()
        )
    );
}

Примечание: не устанавливайте никакие параметры в скобках.

3. Создайте маршрут для javascriptRoutes действие и включить его в свой шаблон

маршрут conf/routes

GET     /javascriptRoutes     controllers.Application.javascriptRoutes

посмотреть в <head> часть /views/main.scala.html

<script type="text/javascript" src='@routes.Application.javascriptRoutes()'></script>

4. Используйте javascriptRoutes, где вы хотите

теперь вы можете использовать маршруты в JS, чтобы получить правильный путь без необходимости указывать url и type. Для примера вместо:

 $('.getAjaxForThisContainer').click(function(e) {
    var idToGet = $("#someField").val();
    $.ajax({
        type : 'GET',
        url : '@routes.Application.getItem()',
        data : {
            id: idToGet
        },
        success : function(data) {
            // ... some code on success
        }
    });
    return false;
});

вы можете использовать упрощенную версию (myJsRoutes из пункта 2):

myJsRoutes.controllers.Application.getItem(idToGet).ajax({
    success : function(data) { ... some code ... }
});

или 

myJsRoutes.controllers.Application.newItem().ajax({
    success : function(data) { ... some code ... }
});

etc...

  • вам не нужно указывать type: "POST" - JS маршрутизатор будет использовать правильный метод в соответствии с conf/routes правила
  • вы можете установить id записи (или других параметров) в GET или PUT (или другие методы), используя routes-like синтаксис в чистом JS
  • если ваше правило маршрута содержит все необходимые параметры, вы можете действительно минимизировать свой JS:

по маршруту:

GET   /some/:a/:b/:c    controllers.Application.getABC(a: String, b: Integer, c: String)

JS:

myJsRoutes.controllers.Application.getABC("a", 1, "b" ).ajax({});
121

мне нравится" старый добрый " простой способ:

1 на странице, с JQuery,

внутри какой-то даже-обработчик 

 $.get('/giveme', {'arg': value}, function(data) {

                                    window.alert(data);

                                  }
 );

2 на стороне сервера / воспроизведения

2.1 маршруты: GET /giveme controllers.Application.giveme(arg)

2.2 действие scala:

object Application extends Controller { 

      def giveme(arg:String) = Action {
        Ok(Json.toJson("hello," + arg ))
      }

    }
8

что-то, чтобы следить за... при вызове 

Routes.javascriptRouter("myJsRoutes",

маршруты импортируются из play.Маршруты, а не играть.прикладной программный интерфейс.Маршруты

была ошибка, когда я реализовал этот код, потому что я предполагал, что он придет из api (очевидно, я ошибался). Кроме этого, все отлично работает~!!

7

существует более простое решение, используйте встроенный маршрутизатор для генерации маршрутизатора Javascript. Вы можете создать маршрутизатор Javascript с помощью @javascriptRouter вспомогательная директива, поместите следующий код внутри тега заголовка html-страницы (возможно, внутри основного шаблона украшения)

<head>
    <title>Saeed Title</title>
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
    <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    <script src="@routes.Assets.at("javascripts/jquery/v1.12.4/jquery.min.js")" type="text/javascript"></script>
    @helper.javascriptRouter("jsRoutes")(
        routes.javascript.MyController.getById,
        routes.javascript.MyController.getByName
    )
</head>

не беспокойтесь о синтаксической ошибке (в Intellij) и не используйте скобки после имени действия. Теперь вы можете использовать jsRoutes.controllers.MyController.getById(id) в вашем коде вызова ajax.

$.ajax(jsRoutes.controllers.MyController.getById(id))
   .done( /*...*/ )
   .fail( /*...*/ );

или использовать jsRoutes.controllers.MyController.getById(id).url получить url-адрес. дополнительная информация.

2

ответ Маркуса очень хорош, поэтому любой, у кого есть эта проблема, должен иметь возможность использовать это.

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

Это было потому, что в моем файле маршрутов у меня было следующее: 

POST    /                           controllers.Application.makeCall()
POST    /                           controllers.Application.saveDefaultPhoneForUser(handset : String)

имея два метода post с тем же местоположением /. Казалось, он всегда ходил звонить. Так что просто подсказка ни для кого не делайте этого, иначе это не сработает.

мне просто нужно было изменить его на:

POST    /                           controllers.Application.makeCall()
POST    /saveDefaultPhoneForUser    controllers.Application.saveDefaultPhoneForUser(handset : String)

надеюсь, это кому-то поможет.

1