環境

MacOSX Sierra
MAMP 4.1.1
GooGle Chrome

質問

teratailもそうですが、
「質問する」ボタンを押してもページ遷移は起こらず、
リロードしても再度フォームに送信するか聞かれることもなければ二重に送信されることもないサイトがあると思うのですが、あれはどうやって実装してるのでしょうか？

是非私のサイトでも取り入れたいので教えていただけると嬉しいです。

やった事

「submitしても画面遷移がなくリロードしても確認メッセージが出ないあれ」

で検索しました。
一番近かったのが

画面遷移せずに確認ページ表示できるお問合せフォーム_技術三昧ブログ_zanmai.net

でしたが、フォームに入力された値を確認するページへは遷移なしでしたが、確認して送信する時はPOSTで自分自身へ遷移していました。

「post without transition reload」

で検索した限りでは

Submit The Form Without Page Refresh Using Ajax and jQuery On TalkersCode.com

ここがそうなのかなと思いましたが、リロードすると「フォーム再送信の確認」が出てきます。

やりたい事

フォームの送信ボタンを押すとデータが送信され、
その時ページ遷移は伴わず、
リロードしても再送信の確認が出てこないwebページを作りたいです。

困っていること

上記機能を実現するためgoogle検索をし続けてるのですがいいサイトが見つからず困っています。

よろしくお願いします。

引き続きやった事 2017.10.19.8.36

teratailの様な動きを作りたければteratalのソースを参考にすればいいと思い、
次のようなソースを書きました。
と作ったソースを載せようとしたのですが、

「通常のコードと違う・・・」というセキュリティーを考慮したメッセージが出てここには載せられませんでした。

要約すると、teratailの質問するボタンを押した画面でソースを参照し、関連していそうなformを抜き出し、ヘッダで呼んでるcssをローカルに保存して読み込むようにし、javascriptはpc.jsしか関連しそうなのがなかったのでcssと同様に保存して呼び出すようにしました。

ファイルは次のように配置しました。

teratail
├── css
│   ├── front
│   │   └── head.css
│   ├── material-icons.css
│   ├── plugins
│   │   ├── bootstrap-markdown.min.css
│   │   ├── highlight
│   │   │   └── pc
│   │   │       ├── default.css
│   │   │       └── highlight.css
│   │   └── perfect-scrollbar.min.css
│   └── questions
│       └── input_new.css
├── input.html
└── js
    ├── jquery-2.1.4.js
    ├── pc.js
    └── sizzle.js

sizzle.jsだけ必要そうだけどどう使えば良いのか分からずただ置いてある状態です。
.jsが使えてないのかなと思うのですが、元ソースのヘッダなどを見ても特に.jsファイルを読み込んでるのも見当たらず、壁にぶつかっています。

お知恵をお貸しくださいませ。

行動規範の内容に同意します

回答1件

ベストアンサー

ページ遷移のないsubmitはいわゆるajaxで処理するのが基本です。
昔はframe技術が盛んでしたが今はあまりつかわれていません。
リロードの際の再送信確認は単にブラウザが実装しているpostの仕様です
非同期でバックグラウンドにsubmitする限り再送信の確認はでません
（というよりリロード時に再送信されません）

投稿2017/10/19 00:48

yambejp

総合スコア114769

taro_nii_chan

2017/10/19 01:21

なるほど、「ajax」でググるだけで色々それらしき説明をしてるページがたくさん出てきますね。試してみてご報告します。

taro_nii_chan

2017/10/19 02:43

こんな感じにしてみました。 ```html <!DOCTYPE html> <html> <head> <title>ajax test</title> <script type="text/javascript" src="./js/jquery-2.1.4.js"></script> <script type="text/javascript"> $(function() { $(".button").click(function() { $.ajax( { url: "test.html", context: document.body, datatype: "html" }).done(function(data) { $(".section").html((data)); }); }); }); </script> </head> <body> <h1>ajaxのテストです。</h1> <button type="button" class="button">投稿する</button> <div class="section">セクションです</div> </body> </html> ``` リロードすると「セクションです」に戻ってしまいますが、そこはどうにでもなるでしょうから暗闇からは脱した思いです。ありがとうございました。

行動規範の内容に同意します