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 示例中找到使用示例

无论如何，现在您可以通过更改来修复您的 AJAXurl调用

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控制器中创建这三个动作：

  • 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 中使用路由来获取正确的路径，而无需指定urland 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规则使用正确的方法
  • 您可以使用纯 JS 中的语法id将记录（或其他参数）设置为GET或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 回答
9

我喜欢“老好”的简单方式：

1在页面中，使用 JQuery，

在一些偶数处理程序中

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

                                    window.alert(data);

                                  }
 );

2在服务器/播放端

2.1 路线：GET /giveme controllers.Application.giveme(arg)

2.2 斯卡拉行动：

object Application extends Controller { 

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

    }
于 2013-08-18T03:27:44.087 回答
7

需要注意的事情...打电话时

Routes.javascriptRouter("myJsRoutes",

Routes 是从 play.Routes 导入的，而不是 play.api.Routes

实现此代码时出现错误，因为我认为它来自 api（显然我错了）。除此之外，一切都很好~！！

于 2013-01-30T04:33:33.477 回答
2

有一个更简单的解决方案，使用嵌入式路由器生成 Javascript 路由器。您可以使用 helper 指令生成 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获取网址。 更多信息。

于 2016-07-19T10:03:59.943 回答
1

Marcus 的回答非常好，所以遇到此问题的其他任何人都应该能够使用它。

我确实遇到了一个问题，但在尝试让它工作时，我花了一点时间才开始工作。当我发出我的 ajax 请求时，它路由到了错误的方法。

这是因为在我的路线文件中，我有以下内容：

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

通过具有相同位置 / 的两个 post 方法。它似乎总是去打电话。所以只是给任何人的提示，不要这样做，否则它将不起作用。

我只需要将其更改为：

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

希望这可以帮助某人。

于 2012-06-21T23:42:10.107 回答