web-dev-qa-db-ja.com

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

これを行う方法は確かにありますが、私は何も見つけることができません。どんな助けも大いに評価しました。

javascriptjavaajaxroutesplayframework-2.0
59
user1434177

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

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

_url : '@routes.Application.saveDefaultPhoneForUser()',
_

この方法では、JS全体をテンプレートに配置する必要がありますが、これは間違っています。別のJSファイルに移動することもできますし、javascriptRoutesを使用する必要があるようにすることもできます。

その他...

javascriptRoutesは記述されていませんyet公式ドキュメントにありますが、ここにステップバイステップの紹介があります。説明は洗練されているように見えますが、事実上この方法を使用すると多くの利点があります。

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)
_

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

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

2.一般的なルートをJSに変換するアクションを作成します

  • どこかに配置します。 Applicationコントローラー内
  • javascriptRoutes()と呼ぼう

そのアクションでは、conf/routes_ファイルからexistingルートをポイントします

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

簡易バージョンを使用できます（ポイント2からのmyJsRoutes）：

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

または

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

等...

  • _type: "POST"_を指定する必要はありません-JSルーターは_conf/routes_ルールに従って正しいメソッドを使用します
  • 純粋なJSの_routes-like_構文を使用して、レコード（または他のパラメーター）のidをGETまたはPUT（または他のメソッド）に設定できます。
  • ルートルールに必要なすべてのパラメーターが含まれている場合、JSを最小限に抑えることができます。

ルートの場合：

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

JS：

_myJsRoutes.controllers.Application.getABC("a", 1, "b" ).ajax({});
_
123
biesior

私は「古き良き」シンプルな方法が好きです：

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
ses

気をつけるべきこと...呼び出すとき

Routes.javascriptRouter("myJsRoutes",

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

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

7
hook38

より簡単なソリューションがあり、組み込みルーターを使用してJavascriptルーターを生成します。 _@javascriptRouter_ヘルパーディレクティブを使用してJavascriptルーターを生成し、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で）を気にせず、アクション名の後に括弧を使用しないでください。これで、ajax呼び出しコードでjsRoutes.controllers.MyController.getById(id)を使用できます。

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

または、jsRoutes.controllers.MyController.getById(id).urlを使用してURLを取得します。 詳細 。

2
Saeed Zarinfam

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

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

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

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

同じ場所/を持つ2つのpostメソッドを使用します。いつも電話をかけるように見えた。だから、だれかのための単なるヒントは、そうしないとうまくいかない。

次のように変更する必要がありました。

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

これが誰かを助けることを願っています。

1
user1434177