如何綁定到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>