質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2292閲覧

javascriptとHTML5でフォームの変更内容をsubmitせずに即座にUIとデータベースに反映させたい。

jantaku

総合スコア34

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/06/24 07:22

お世話になっております。

php,javascriptでウェブサイトを作っているのですがフォームに打ち込んだ内容をsubmitせずに即座にデータベースに反映させる手段が分からず行き詰まっております。

具体的には問題が書かれたスライドが多数あり、それぞれの問いに対する回答をsubmitすることなくapiにpostし、スライドの隣に回答の内容を反映させていきたいと考えております。
teratailのようにプレビューを出し、さらにその内容を「質問する」ボタンを押さずにapiにpostするようなイメージです。

調べたところフォーム内容を即座にUIに反映させることはできそうなのですが、clickイベントなしでPOSTする方法がわかりません。

使用する概念や技術をご教示いただければ幸いです。

参考サイト:http://alphasis.info/2013/12/javascript-gyakubiki-form-immediatelyreflect/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masaya_ohashi

2016/06/24 07:34

確認ですが、1文字打つ度にサーバへ通信し、DBを1文字ごとに書き換える処理は非常にサーバや通信網に負荷がかかるかと思いますが、その仕様で大丈夫ですか?
guest

回答2

0

Ajaxという技術を使用します。
Ajaxを使うことで非同期通信、つまり画面遷移を行わずにPOSTやGETを行うことができます。

html

1<button type="button" id="js-post-btn">適用</button>

というコードがあった場合に

javascript

1$('#js-post-btn').on('click', function() { 2 var id = 10; 3 var name = 'test'; 4 $.ajax({ 5 type: 'POST', 6 url: 'test.php', 7 data: { 8 'id': id, 9 'name': name 10 } 11 }); 12}); 13

これでtest.phpに対し、idとnameをPOSTすることができます。
このサンプルではclickイベントを使用していますが、
$.ajax関数の実行タイミングに応じて実装すればいつでもPOSTを行うことができます。

投稿2016/06/24 07:45

ShoheiTai

総合スコア897

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jantaku

2016/06/24 10:29

ありがとうございます!
guest

0

Ajaxってやつですね、jQueryを使うとそれなりに楽にできるようですよ。

投稿2016/06/24 07:32

Mr_Roboto

総合スコア2208

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jantaku

2016/06/24 10:29

リアルタイム通信っていうんですね。 ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問