Snippets

sironekotoro 普通のPOST, JSONにしてPOST, ブックマークレットからPOST

Created by sironekotoro
post_bookmarklet.url
Raw 
1
javascript:var xhr=new XMLHttpRequest,url="http://localhost:3000/";xhr.open("POST",url,!0);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("food=bookmarklet&lang=perl");
post_iroiro.pl
Raw 
  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)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.