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

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

ただいまの
回答率

90.51%

  • PHP

    23036questions

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

  • JavaScript

    19308questions

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

  • JSON

    1390questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • Ajax

    1261questions

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

  • AngularJS

    591questions

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

Ajax POSTとJSONファイル出力の同時処理について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,090

poooooo

score 117

Ajax PostとJSONファイル出力を同時に処理したいと思っています。
実現したいことは下記のものです。

①チェックボックスやセレクトボックスで値を変更→
②変更された値をAjaxPostで送信
③MySQLにリクエストされた返却結果をJSONファイルに出力
④AjaxでJSONファイルを読み込む

①~④をページ遷移せず行う、いわゆるリアルタイム検索を実装したいです。
また、MySQLにデータをINSERTしたりDELETEするケースも出てくる想定でいます。

<仕組みのイメージができていないところ>
PHPでMySQLにリクエストしたり、データを挿入したりすることになると思いますが、
サーバーサイドの処理なのにリアルタイムでリクエスト通りのJSON出力はどのように行っているのかというところがイメージできてません。
今まで、送信だけのajax postは実装したことがあります。

どなたかご教授いただけますと幸いです。
参考サイトなどあればそちらも教えていただきたいです。

また、AngularJSで開発しているので、AngularJSでの実装法だと尚嬉しいです。

よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

問題点がちょっと良く分かっていないのですが、【JSONファイルに出力】と書いている辺りに、誤解があるのですかね?
一般的な Ajax 通信では、
【サーバサイドでJSONファイルを出力】→【Ajax でそのファイルを読み込む】
という動作にはならず、
【サーバサイドでJSONデータを送信】→【Ajax でそのデータを受け取る】
という動作になります。
Ajax では、サーバに処理をリクエストして、返信が来るのを待つため、リアルタイムに処理されます。
サンプルはいくらでもあるので、適当に探してみてください。

なお、AngularJS は使ったことがないのですが、ちょっとくせがあるようです。
AngularJSでWebAPI(PHP)連携 POST編
参考まで。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/01 19:39

    ありがとうございます。
    なんとなく、動かしつつ仕組みが理解できて来た気がします。
    実装はできました。

    ありがとうございました。

    キャンセル

  • 2016/08/01 19:42

    おつかれさま^^
    理解できていなかった点は、【JSONファイルに出力】の箇所であってましたか?
    どこがうまく理解できなかったのか、もし記述できるようであれば教えてください。

    キャンセル

  • 2016/08/02 09:26 編集

    AjaxPostをした際に、わざわざページを開かなくても、処理さえ書いておけばPHPでリクエストされたものに応じて送信するJSONを書き換えられるということを知らなくて、
    そこを実装を通じて理解できた感じです。

    通信の仕組みをよく理解していないことからの勘違いだと思うのですが、
    サーバーサイドの処理 = ページを開かないと処理されない という漠然としたイメージが先行して、ページ遷移のないAjaxではリクエストしてもPHPの処理が実行されないと思い込んでいました。


    AngularJSのAjaxPOSTに関する参考リンクは非常に助かりました。
    この方法でしか実装できませんでした。
    厳密にいうと、

    ```$postdata = file_get_contents("php://input");```
    ↑こちらまではうまくいくのですが、

    ```$request = json_decode($postdata);```
    ↑こちらの処理はなぜかNULLになってしまうため、自前の関数でうけとったパラメータを分解し連想配列に格納 → JSONに変換
    ということをして実装しました。

    キャンセル

  • 2016/08/02 10:02

    そもそもの Ajax の挙動を誤って認識していたということですね。
    その場合、なぜ AngularJS をフロントで使用しようとしたのか、もう一度考えたほうが良いかもしれません。
    http://www.publickey1.jp/blog/15/angularjsangularjsdeverlopers_summit_2015.html
    個人的感想ですが、かなり尖った フレームワークだと思います。
    とは言え、とりあえず、意図した挙動を得ることが出来て良かったです。
    お疲れ様でした。

    キャンセル

同じタグがついた質問を見る

  • PHP

    23036questions

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

  • JavaScript

    19308questions

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

  • JSON

    1390questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

  • Ajax

    1261questions

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

  • AngularJS

    591questions

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