60

そのため、以前は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;
    });

これを行う方法があると確信していますが、私は何も見つけることができません。

4

5 に答える 5

123

このジョブではjavascriptRoutes、routes.conf に基づいて正しい JS パスを生成するため、使用する必要があります。使用例は Zentaskサンプルにあります

urlとにかく、今のところ、に変更することでAJAX呼び出しを修正できます

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)

もちろん、Applicationコントローラーで少なくとも次の 3 つのアクションを作成する必要があります。

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

2. 共通ルートを JS に変換するアクションを作成する

  • どこかに置きます。あなたのApplicationコントローラーで
  • 呼びましょうjavascriptRoutes()

そのアクションでは、ファイルから既存のルートを指定しますconf/routes

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

等...

  • 指定する必要はありません- JS ルーターはルールtype: "POST"に従って正しいメソッドを使用しますconf/routes
  • 純粋な JS の構文を使用しidて、レコード (または他のパラメーター) をGETor PUT(または他のメソッド)に設定できます。routes-like
  • ルート ルールに必要なすべてのパラメーターが含まれている場合は、JS を本当に最小化できます。

ルート:

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

JS:

myJsRoutes.controllers.Application.getABC("a", 1, "b" ).ajax({});
于 2012-06-21T07:36:19.570 に答える
7

注意すべき点...電話するとき

Routes.javascriptRouter("myJsRoutes",

ルートはplay.api.Routesではなくplay.Routesからインポートされます

このコードを実装したときにエラーが発生しました。これは、APIからのものであると想定していたためです（明らかに私は間違っていました）。それ以外はすべてうまくいきます〜!!

于 2013-01-30T04:33:33.477 に答える
2

より簡単な解決策があります。組み込みルーターを使用して 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).urlURLを取得するために使用します。 詳細はこちら

于 2016-07-19T10:03:59.943 に答える
1

マーカスの回答は非常に優れているため、この問題を抱えている他の人なら誰でもこれを使用できるはずです。

ただし、これを機能させようとしたときに、機能するのに少し時間がかかったという問題が1つありました。ajax リクエストを行っていたときに、間違ったメソッドにルーティングしていました。

これは、ルートファイルに次のものがあったためです。

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

同じ場所に2つのポストメソッドを持つことによって/. いつも電話をしに行っているようでした。したがって、これを行わないでください。そうしないと機能しません。

私はそれを次のように変更する必要がありました：

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

これが誰かに役立つことを願っています。

于 2012-06-21T23:42:10.107 に答える