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

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

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

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

Q&A

解決済

1回答

3832閲覧

cakephp2系 非同期通信にて取得した値をリアルタイムに表示させたい。

milkif

総合スコア16

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

0グッド

0クリップ

投稿2016/06/01 08:23

編集2016/06/03 14:06

###前提・実現したいこと

非同期通信にて取得した値をDBに登録し、送信後の値をリアルタイムに表示させたい。

###発生している問題・エラーメッセージ

非同期通信にてモーダルを閉じる処理、次の動画を呼び出す処理及びDBにデータを保存するまでは実行できましたが、送信後の値(afterP)が送信前(beforeP)の値となってしまう。
手動でブラウザのリロードを行うと送信後の値(afterP)を取得できるが、元の動画に戻ってしまう。

dataType:"json"にすると送信時にアラートが表示 Error : SyntaxError: Unexpected end of JSON inputが出てしまい次に進みません。 index.ctpのJSON.encodeと JSON.parseを外すと上記エラーは出ませんが、videosの値をjsファイルに渡す方法がわからず外せていません。

###該当のソースコード

php

1Point.php 2class Point extends AppModel { 3 public function sumByUserId($userId) { 4 $data = $this->find('all', 5 array( 6 'conditions'=> array('user_id' => $userId), 7 'fields' => array('sum(point) as sumPoints'), 8 ) 9 ); 10 return $data['0']['0']['sumPoints']; 11 } 12}

php

1PointsController 2他のコード省略 3public function beforeFilter() { 4 parent::beforeFilter(); 5 $userId = $this->Auth->user('id'); 6 $beforeP = $this->Point->sumByUserId($userId); 7 $this->set(compact('beforeP')); 8} 9 10public function index() { 11 $this->set('videos', $this->Video->find('all')); 12} 13 14public function addPoint() { 15 if (!$this->request->is('ajax')) { 16 throw new BadRequestException(); 17 } 18 $userId = $this->Auth->user('id'); 19 $data = array( 20 'Point' => array( 21 'user_id' => $this->Auth->user('id'), 22 'point' => $this->request->data['point'], 23 ) 24 ); 25 $this->Point->create(); 26 $this->Point->save($data); 27 28 $afterP = $this->Point->sumByUserId($userId); 29 $this->viewClass = 'json'; 30 $this->set(compact('afterP')); 31 $this->set('_serialize', array('afterP')); 32 //$this->set('_serialize',(res));のまま使ってしまい気付ずこの時間になってしまいました。 33 }

javascript

1point.js 2他のコード省略 3$(".send").on("click",function(){ 4 $.ajax({ 5 type: "POST", 6 url: "/aaa/bbb/addPoint", 7 dataType: "json", //やっとjsonで動きました!有難うございます。 8 data: { 9 "point": point 10 }, 11 success: function(res) { 12 //モーダルを閉じる処理; 13 //次の動画を呼び出す処理; 14 $('#sumPoints').text(res.afterP); 15 }, 16 error: function(XMLHttpRequest, textStatus, errorThrown) { 17 alert('Error : ' + errorThrown); 18 } 19 }); 20 return false; 21 } 22});

html

1index.ctp 2他のコード省略 3<p>送信前:<?php echo $beforeP; ?> pt</p> 4<p>送信後:<span id="sumPoint"></span> pt</p> 5 6<?php 7function json_safe_encode($data){ 8 return json_encode($data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); 9} 10 11$videos = json_safe_encode($videos); 12//$afterP = json_safe_encode($afterP);(削除) 13 ?> 14 15<script> 16var videos = JSON.parse('<?php echo $videos; ?>'); 17//var afterP = JSON.parse('<?php echo $afterP; ?>');(削除) 18</script>

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
XAMPP 5.6.14-0
cakephp-2.7.8
jquery 1.11.0
10.0.17-MariaDB

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

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

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

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

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

guest

回答1

0

ベストアンサー

exitはPHPスクリプト自体を終了させる言語構造で、それ以降の処理は行われません。
削除するか、処理を抜ける目的ならreturnに置き換えてみてください。

また、PointsController::indexがポイント操作も請け負うのは不自然で
その部分は別アクションや別コントローラに切り分けたほうが良いかもしれません。
そのほうが問題箇所の特定もしやすくなるはずです。

PHP: exit - Manual
http://php.net/manual/ja/function.exit.php

###追記 2016-06-03 18:15
ポイントの合計を求める処理は複数個所で使われそうなので、Pointモデルのメソッドに
してもいかもしれません。

php

1class Point extends AppModel { 2 //略 3 public function sumByUserId($userId) { 4 $data = $this->find('all', 5 array( 6 'conditions'=> array('user_id' => $userId), 7 'fields' => array('sum(point) as sumPoints'), 8 ) 9 ); 10 return $data['0']['0']['sumPoints']; 11 } 12} 13 14//コントローラ側で使う時はこんな感じ 15$userId = $this->Auth->user('id'); 16$afterP = $this->Point->sumByUserId($userId); 17

ポイント加算アクションの例です。indexアクション内のajax対処部分を
抜き出しただけなので、問題の解決につながるかはまだ分かりません。

php

1public function add() { 2 if (! $this->request->is('ajax')) { 3 //ajax以外なら例外を投げる 4 } 5 $userId = $this->Auth->user('id'); 6 $data = array( 7 'Point' => array( 8 'user_id' => $userId, 9 'point' => $this->request->data['point'], 10 ) 11 ); 12 $this->Point->create(); 13 $this->Point->save($data); 14 15 $afterP = $this->Point->sumByUserId($userId); 16 $this->viewClass = 'json'; 17 $this->set(compact('afterP')); 18 $this->set('_serialize','res'); 19} 20

ポイントの加算に対応するアクションがindexからaddに変わったので
ajaxのリクエスト先も変更します。

javascript

1$.ajax({ 2 type: "POST", 3 url: ""

urlを /CakePHPディレクトリのパス/points/addに変更
環境によってはちょっと違うかもしれません。ブラウザでF12を押してコンソールを出し、
いろいろ試しながら確認してみてください。

addアクションからレスポンスが返ってくるようになれば、
indexアクション内のajaxに関わるコードは削除してしまっても構いません。

投稿2016/06/02 08:35

編集2016/06/03 09:32
nnssn

総合スコア1221

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

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

milkif

2016/06/02 14:33

nnssnさん回答有り難うございます。exit;はMySQL接続を切る役割だと勘違いしていました。有難うございます。 ポイント操作の切り分け方ですが beforeFilter( ){ ・現在のポイント合計を呼び出す処理 ・現在のポイント合計を変数にする処理 } index( ){ ・登録されている動画を呼び出す処理 ・ajaxでdataを受け取る処理 ・そのdataをDBに保存する処理 } other action( ){ ・DBからポイント合計を呼び出す処理 ・ポイント合計を変数にする処理 } 切り分けの考え方はよろしいでしょうか? その際、index( )でajaxお処理をした後に、自動でother action( )の処理をさせるのは redirectを使って連携させるのでしょうか? トンチンカンな質問かも知れませんが、お時間のある時で構わないのでアドバイスをお願いいたします。
nnssn

2016/06/03 09:34 編集

> その際、index( )でajaxお処理をした後に、自動でother action( )の処理をさせるのは > redirectを使って連携させるのでしょうか? 今はindexアクションが状況に応じてHTMLを返したり、ポイント数をjsonで 返したりしています。多分この、状況によって役割が変わるという部分が 分かりにくさにつながっているのだと思います。 ajax > index > other という流れをイメージされていると思うのですが、 ajax > other のみで完結させたほうが良いでしょう。 ・indexアクションはindexの描画だけを担当する、Ajaxの事は考えない ・「ポイントを追加して返す」アクションはそれだけをする、HTMLの事は考えない と分ければ処理内容は追いやすくなるはずです。 続きます。 < コメント欄だとコードが見づらいので回答を編集しました。
milkif

2016/06/03 14:09

貴重なお時間を頂き回答下さり誠にありがとうございました。 とても分かりやすく、綺麗なコードと丁寧なご説明のおかげで、やっとやっと出来ました! 感謝し尽くしても足りないくらい本当にありがとうございました。 嬉しくてたまりません。質問のコードは動かせたコードに修正いたしました。 本当にありがとうございました。
nnssn

2016/06/04 09:22

おお...addアクションの最後間違ってましたね、失礼しました。 問題のほうが解決したようで良かったです。作品完成までがんばってください。
milkif

2016/06/04 09:51

本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問