玩2.X：如何使一个普通按钮的AJAX请求玩2.X：如何使一个普通按钮的AJAX请求(Play 2.

所以，我已经成功地得到了Ajax请求之前的工作，但我一直有使用窗体，然后在年底提交就返回false，这样它不刷新页面。

我最近也刚搬进我的javascript到这造成我的@命令失败一个单独的文件。正因为如此，我不就没怎么我的网址设置为我的路线？

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

我肯定是有办法做到这一点，我只是没有运气找到任何东西。任何帮助非常appreaciated。

Answer 1:

对于这个工作，你应该去javascriptRoutes ，因为它基于您的routes.conf正确的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)

当然，你需要创建至少这三个动作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()
        )
    );
}

注意：不要在括号设置任何PARAMS。

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

等等...

你不需要指定type: "POST" - JS路由器将根据使用正确的方法conf/routes规则
你可以设置id的记录（或其他PARAMS），以GET或PUT使用（或其他方式） routes-like语法纯JS
如果您的路由规则中包含所有必需的PARAMS你真的可以减少你的JS：

路线：

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

JS：

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

Answer 2:

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

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

    }

Answer 3:

事情要提防......当调用

Routes.javascriptRouter("myJsRoutes",

路线是从play.Routes，不play.api.Routes进口

当我实现了这个代码，因为我认为它会来自API（显然我错了）有一个错误。除此之外，一切都很正常〜!!

Answer 4:

有一个简单的解决方案，使用嵌入式路由器生成JavaScript路由器。您可以使用生成JavaScript路由器@javascriptRouter帮手指令，将下面的代码的HTML页面head标签内（也许是主要的装饰模板中）

<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。更多信息。

Answer 5:

马库斯的答案是非常好的，所以任何人有这个问题应该能够使用它。

虽然试图让这个到我花了一些时间来获得工作工作时，我也有一个问题。当我让我的Ajax请求它被路由到错误的方法。

这是因为在我的路线文件我有以下几点：

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

通过具有两个职位方法具有相同的位置/。它似乎总是去进行呼叫。因此，只要任何人小费不这样做，否则它不会工作。

我只是需要将其更改为：

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

希望这可以帮助别人。

文章来源: Play 2.x: How to make an AJAX request with a common button