使用 JavaScript 调用 Action答案

【问题标题】：calling an Action using javascript使用 JavaScript 调用 Action
【发布时间】：2013-06-05 12:39:24
【问题描述】：

对 PLAY 框架来说相当新，由于我的工作限制，我们使用的是 1.2.5 版本，而到目前为止，我能够通过表单提交使用从 HTML 到 Controller 的常规流程来完成我的所有流程。我想从 JavaScript 函数调用 Application.Action。

虽然我有一个输入信息的表单，但可以单击另一个非提交按钮以转到单独的页面以获取更多信息。我想通过“onClick”调用 JavaScript 函数，并在 JavaScript 函数内部调用“@Application.Action(some param...)”。

在调用操作之前，我需要获取特定输入字段中的内容。

我尝试使用 PLAY“弹出窗口”来做到这一点，但这似乎不起作用，因为我无法传递参数。

所以这是我的sn-p：

在 HTML 文件中（扩展拥有所有 javascript 文件 "include" 的 main.html）

 <form>....
        some input fields here
        submit button here
    </form>

<button onclick="myFunction()" data-role="button" style="width: 5em">Click here</button>

在 main.html 中包含的 JavaScript 文件中，我有类似的内容

function myFunction() {
    var inputField1 = document.getElementById('inputField1').value;
    var inputField2 = document.getElementById('inputField2').value;
    var inputField3 = document.getElementById('inputField3').value;
    window.location = "@{Application.moreInfo(inputField1, inputField2, inputField3)}";
}

当然不行

有没有办法做到这一点？

我必须为此创建路线吗？

我可以通过替换来访问单独的页面

window.location = "@{Application.moreInfo(inputField1, inputField2, inputField3)}";

与

 window.location.href='/goThere';

只要我有路线

 /goThere   Application.goThere

但我想不出一种传递参数的方法，我尝试设置路由

/goThere/{inputField1}{inputField2}{inputField3}    Application.goThere(inputField1...)

但我想我也没有正确的语法。

有没有办法调用 Application.Action 并从 JavaScript 函数传递参数/字段。

感谢任何帮助

【问题讨论】：

不清楚你在问什么。
这一切都可以通过 jQuery 轻松完成。为什么你不想使用它？ jsfiddle.net/L8duC
澄清：在 Play 中使用表单控制器进程时，您有
.. .
我希望能够单击另一个按钮 - onClick=myFunction() 以显示不同的页面，然后从该新页面回调该操作 @{Application.doStuff(someParam)} - 因此你如何调用来自 JavaScript 函数的 Application.Action
邦迪，我想在点击非提交按钮时调用不同的页面。会有一个提交按钮和一个更多信息按钮，当单击更多信息按钮时，您将转到一个javascript函数并使用所有参数回调Application.Action

标签： javascript html playframework

【解决方案1】：

内置的#{jsAction /} 模板标签完全符合您的要求。

例子：

假设你有一条路线

GET     /moreinfo/{foo}/{bar}        Application.moreInfo

您可以使用jsAction 的结果来获取带有您想要的参数的正确URL：

var fieldOne = "I'm a Javascript variable";
var fieldTwo = "Really? Me too";
var moreInfoAction = #{jsAction @Application.moreInfo(":foo", ":bar") /};

// and since it looks like you want to set the current location
// to your freshly obtained URL:
window.location.href = moreInfoAction({"foo": fieldOne, "bar": fieldTwo});

【讨论】：