Snippets

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

Created by sironekotoro
View revision

File post_bookmarklet.url Added

  • Ignore whitespace
  • Hide word diff 
+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");

File post_iroiro.pl Added

  • Ignore whitespace
  • Hide word diff 
+#!/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>
HTTPS SSH

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