Play 2.x：如何使用通用按钮发出AJAX请求

javascript ajax java routes playframework-2.0

2022-08-31 16:18:44

因此，我之前已经成功地获得了AJAX请求，但我一直必须使用表单，然后在提交结束时返回false，以便它不会刷新页面。

我最近也刚刚将我的JavaScript移动到一个单独的文件中，这导致我的@命令失败。正因为如此，我不知道如何将我的URL设置为我的路由？

网页：

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

Playframework Java code：

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

我相信有一种方法可以做到这一点，但我只是没有运气找到任何东西。

答案 1

对于这项工作，您应该使用，因为它会根据您的路由.conf生成正确的JS路径。您将在Zentask示例中找到使用示例javascriptRoutes

无论如何，现在您可以通过将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)

当然，您至少需要在控制器中创建以下三个操作：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中的路由来获取正确的路径，而无需指定和。例如，而不是：urltype

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

等。。。

您不需要指定 - JS路由器将根据规则使用正确的方法type: "POST"conf/routes
您可以使用纯 JS 中的语法将记录（或其他参数）设置为或（或其他方法）idGETPUTroutes-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({});

答案 2

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

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

    }

Play 2.x：如何使用通用按钮发出AJAX请求

1. 创建通用路由

2. 创建将常见路由转换为 JS 的操作

3. 创建操作路线并将其包含在模板中javascriptRoutes

4. 在您想要的地方使用javascriptRoutes

3. 创建操作路线并将其包含在模板中`javascriptRoutes`