Snippets
Created by
sironekotoro
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | #!/usr/bin/env perl
use Mojolicious::Lite;
# use Mojo::JSON;
# use Mojo::Headers;
# my $headers = Mojo::Headers->new;
# $headers = $headers->access_control_allow_origin('*');
# $headers = $headers->add('Access-Control-Allow-Origin' => '*');
my $posted_data = [];
get '/' => sub {
my $c = shift;
$c->stash( posted_data => $posted_data);
$c->render(template => 'index');
};
post '/' => sub {
my $c = shift;
# ブックマークレットからの投稿受け用
$c->res->headers->header('Access-Control-Allow-Origin' => '*');
my $food = $c->param('food');
my $lang = $c->param('lang');
push @{$posted_data} , { food => $food, lang => $lang };
$c->redirect_to('/');
};
post '/json' => sub {
my $c = shift;
my $json = $c->req->json;
my $food = $json->{food};
my $lang = $json->{lang};
push @{$posted_data} , { food => $food, lang => $lang };
$c->redirect_to('/');
};
app->start;
__DATA__
@@ index.html.ep
% layout 'default';
% title 'Welcome';
%= t table => (border => 1) => begin
%= t tr => begin
%= t th => 'food'
%= t th => 'lang'
%= end
% for my $data (@{$posted_data}){
%= t tr => begin
%= t td => <%= $data->{food}
%= t td => <%= $data->{lang}
%= end
% }
%= end
%= t form => (name => 'form', action => '/', method => 'POST') => begin
food: <%= t input => (name => 'food') => '' %>
lang: <%= t input => (name => 'lang') => '' %>
%= t button => (type => 'submit') => 'POSTで送信'
%= end
%= t button => (onclick => 'postSubmit()') => 'JSONで送信'
%= javascript begin
%# 素のJSで実装
function postSubmit(){
%# フォームから情報を集める
const lang = document.form.lang.value;
const food = document.form.food.value;
%# オブジェクトを作る
const obj = {
food: food,
lang: lang,
};
%# オブジェクトをJSON形式にする
const json = JSON.stringify(obj);
%# XMLHttpRequestでPOSTする
let xhr = new XMLHttpRequest();
xhr.open("POST", "/json");
xhr.send(json);
%# 投稿が終わったらページをリロードする
xhr.onreadystatechange = function() {
if( xhr.status == 200) {
%# リロード
location.reload();
}
}
}
%= end
@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
<head><title><%= title %></title></head>
<body>
<%= content %>
</body>
</html>
|
Comments (0)
You can clone a snippet to your computer for local editing. Learn more.