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

因此,我之前已经成功获得了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;

});

我确定有办法做到这一点,我只是找不到运气。任何帮助大加赞赏。

回答:

对于这项工作,您应该继续使用javascriptRoutes它,因为它会根据routes.conf生成正确的JS路径。您可以在Zentask

示例中找到用法示例

无论如何,现在您可以通过将更url改为来修复AJAX调用

url : '@routes.Application.saveDefaultPhoneForUser()',

这种方法要求将整个JS放在模板中,这是错误的。可以甚至应该将其移动到单独的JS文件中,并使其成为可能,您需要使用javascriptRoutes。

在官方文档中描述,但这里是逐步的介绍。尽管描述看起来很复杂,但 实际上

使用这种方式会带来很多好处。

回答:

首先,您需要在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) { ... }

回答:

  • 将其放置在某处,即。在您的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()

)

);

}

请勿在方括号中设置任何参数。

回答:

路线 conf/routes

GET     /javascriptRoutes     controllers.Application.javascriptRoutes

<head>部分检视/views/main.scala.html

<script type="text/javascript" src='@routes.Application.javascriptRoutes()'></script>

回答:

从现在开始,您可以使用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 ... }

});

等等…

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

以上是 Play 2.x:如何使用通用按钮发出AJAX请求 的全部内容, 来源链接: www.h5w3.com/qa/397493.html

回到顶部