如何绑定到Mojolicious中按钮的onclick事件？

Question

我想制作一个小的webapp来控制我使用的命令行音乐播放器（mocp），但是当用户按下页面上的按钮时遇到了路由问题。我预计这个问题与我缺乏HTML有关。

代码：

#!/usr/bin/perl 
use Mocp; 
use Mojolicious::Lite; 

my $mocp = Mocp->new; 

for my $action (qw(play pause stop next previous unpause toggle-pause server)) { 
    get $action => sub { 
     my $self = shift; 
     $mocp->$action; 
     $self->render('controls'); 
    }; 
} 

get '/' => sub { shift->render('controls') }; 
app->start; 

__DATA__ 

@@ controls.html.ep 

%= input_tag 'play', type => 'button', value => 'Play' 
%= input_tag 'pause', type => 'button', value => 'Pause' 
%= input_tag 'volup', type => 'button', value => 'Volume Up' 
%= input_tag 'voldown', type => 'button', value => 'Volume Down' 
%= input_tag 'toggle', type => 'button', value => 'Toggle' 
%= input_tag 'next', type => 'button', value => '>>' 
%= input_tag 'previous', type => 'button', value => '<<' 

如果我浏览到直接途径（例如 '/播放'），一切正常。目标是简单地点击“播放”按钮来执行关联的方法，而不必手动输入路由。我在这个阶段的问题是：

1. 是否将这些方法映射为路由的最佳途径？
2. 如果是这样，我如何通过JavaScript中的'onclick'按钮事件触发路线？

任何意见是非常感谢。

Answer 1

在客户端使用jQuery你可以触发路径与$.get()功能

%= input_tag 'play', type=>'button', value=>'Play', onclick=>"$.get('/play')" 

或

<input type="button" value="Play" onclick="$.get('/play');"> 

使用jQuery，你必须将下面一行添加到您的模板

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script>