スマートフォンからMySQLサーバーにインサート

2014/10/05 17:06

このQ&Aのポイント

HTML+javascriptのスマートフォンアプリからMySQLサーバーにデータをインサートする方法をご紹介します。
端末側のポストフォームを使用してデータを送信し、サーバー側で受け取ります。
必要な情報を隠しフィールドに設定し、送信ボタンを押すことでインサートと画面遷移を行います。

スマートフォンからMySQLサーバーにインサート

「HTML+javascript」のスマートフォンアプリから別サーバーのMySQLと連携させることを考えています。サーバーの情報を取得することは問題なくできたのですが、サーバーにインサートする方法で悩んでいます。【post.html】では、mysqlにインサートはされるものの、端末にはサーバーのinsert.phpがそのまま表示されてしまいます。【post_kai.html】でfunction Check()を試したところ、送信ボタンを押した後に端末内のfinish.htmlが表示されましたが、残念ながらインサートが出来ていませんでした。サーバーにインサートを完了させながら、その後は端末内のfinish.htmlを表示させるためにはどうすればいいでしょうか? ****************************** 端末側 ****************************** 【post.html】 <form name="form1" id="form1" method="POST" name="form1" value="form1" action="http://hoge.ne.jp/insert.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="pw" value="12zdD3fw" /> <input type="button" name="button" value="送信" /> <input type="hidden" name="MM_insert" value="form1" /> </form> 【post_kai.html】 <form name="form1" id="form1" method="POST" name="form1" value="form1" action="http://hoge.ne.jp/insert.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="pw" value="12zdD3fw" /> <script> function Check(){ document.form1.submit(); location.href="finish.html"; } </script> <input type="button" name="button" value="送信" onClick="Check();" /> <input type="hidden" name="MM_insert" value="form1" /> </form> 【finish.html】 <html> OKです <html> ****************************** サーバー側(mysql側)　http://hoge.ne.jp/ ****************************** 【insert.php】省略

tajix14
お礼率72% (175/242)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

shockatz
ベストアンサー率80% (153/191)

2014/10/08 17:16 回答No.3

HTMLフォームのsubmitは、完全な「遷移」ですので、サーバ側に制御が移り、しかもサーバサイトノプログラムはローカル側への遷移指定ができないので、ご希望の動作を実現することはできません。画面遷移と非同期に動作できるのは、submitではなく、Ajaxによる送信です。サーバサイドのプログラムは、処理結果画面ではなく、処理レスポンス（処理結果）を返すように変更し、クライアントサイドは「コールバック」でそれを受け、画面を遷移させます。なお、localhostから外部サーバへの送信となるため、JSONP形式での送信か、サーバサイド側でクロスドメインアクセスを通すような処理も必要になります。

質問者

お礼 2014/10/08 21:44

ありがとうございます。 submitを使用していること自体が誤りだったのですね。目から鱗でした。サーバーの情報取得はクロスドメイン+ajaxで行っていたのですが、調べた限りインサートの例が見当たらず、試行錯誤でsubmitで記載していました。 jsonp insert で検索してみます。有難うございました。深く御礼申し上げます。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

hitomura
ベストアンサー率48% (325/664)

2014/10/07 00:17 回答No.2

すみませんが、あなたの質問文で「省略」となっている insert.php の内容を補足願います。そうすれば PHP に詳しい方が No.1 の回答をどう実装すればいいのかアドバイスしてくれるでしょう。それとも、insert.php を公開できない/修正できない理由があるのでしょうか。

質問者

補足 2014/10/07 23:44

ありがとうございます。 insert.phpを弄っても、端末側のfinish.htmlを表示させることは物理的にできないと思います。サーバー対サーバーの「1対1のクロスドメイン」であれば、相手のURLを記載することにより相手のfinish.htmlの表示をさせることが可能です。(テスト済み) 「1対複数」の「サーバー対スマホ」では、サーバーからスマホに結果を送りようがありません。(←サーバーのPHPでは対応が難しい) あくまでスマホ内で一旦finish.htmlを表示し、その上でそのfinish.html(端末が)サーバーの情報(insert.htmlの結果)を取りに行く必要があると思います。焦点を明確にするためにサーバーのinsert.phpは省略させて頂きました。端末側のjavascriptが焦点と考えています。

ログインすると、全ての回答が全文表示されます。

yambejp
ベストアンサー率51% (3827/7415)

2014/10/06 10:34 回答No.1

insert.phpで、アップロードが成功したときにfinish.html、失敗したときにerror.htmlにそれぞれheaderのLocationで飛ばせばよいでしょう。 http://php.net/manual/ja/function.header.php

質問者

補足 2014/10/06 20:30

回答ありがとうございます。ご指摘の方法では、サーバー側のfinish.htmlにしか飛ばないと思います。 finish.htmlはスマートフォン側にあります。従い、スマートフォン側のpost.html内のjavascriptで対応することが必要です。 (Phonegapを使用していますので、スマートフォン側はhtml+javascriptしか使えません) スマートフォン側のjavascriptでうまく対応する技はございませんでしょうか? わざわざご回答いただいたのに申し訳ございません。よろしくお願いいたします。

ログインすると、全ての回答が全文表示されます。