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

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

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

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

jQuery

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

Ajax

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

Q&A

2回答

573閲覧

PHP電卓へのAjaxの導入のやり方

whawhawha

総合スコア8

PHP

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

jQuery

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

Ajax

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

1グッド

1クリップ

投稿2018/08/06 06:26

前提・実現したいこと

PHPで電卓を作成したのですが、
ここから演算処理はPHPでAjaxを使って非同期通信でできるようにしたいと思っています。
とりあえずjqueryは読み込みましたがここからどうすればよいのかさっぱりわかりません。
ご教示いただけますと幸いです。

該当のソースコード

PHP

1<?php 2//変数定義 3$disp_num = $_POST['disp_num']; 4$pre_num = $_POST['pre_num']; 5$input_num = $_POST['input_num']; 6$ope = $_POST['ope']; 7$button = $_POST['button']; 8$pre_button = $_POST['pre_button']; 9 10//関数定義 11function convertDispNum($num) { 12 preg_match('/(-?)(\d+)(.?\d*)/', $num, $matches); 13 return $matches[1] . number_format($matches[2]) . $matches[3]; 14} 15 16function isOpeBtn($btn) { 17 return preg_match('/(+|−|✕|÷)/', $btn); 18} 19function isNumBtn($btn) { 20 return preg_match('/(\d|.)/', $btn); 21} 22 23 24if (isNumBtn($button) || empty($button)) { 25 if (isOpeBtn($pre_button)) { 26 $pre_num = $disp_num; 27 if (preg_match('/./', $button)) { 28 $disp_num = '0.'; 29 } else { 30 $disp_num = $button; 31 } 32 } else { 33 $disp_num = $disp_num . $button; 34 } 35 36 $input_num = $disp_num; 37} else { 38 switch ($button) { 39 case 'C': 40 $disp_num = ''; 41 $pre_num = ''; 42 $input_num = ''; 43 break; 44 case 'CE': 45 $disp_num = ''; 46 $pre_num = $pre_num; 47 $input_num = ''; 48 break; 49 case '←': 50 $disp_num = substr($disp_num, 0, -1); 51 break; 52 default: 53//演算処理部分 54 if (!empty($pre_num) && (preg_match('/=/', $button) || (isOpeBtn($button) && isNumBtn($pre_button)))) { 55 switch ($ope) { 56 case '+': 57 $disp_num = $pre_num + $disp_num; 58 break; 59 case '−': 60 $disp_num = $pre_num - $disp_num; 61 break; 62 case '✕': 63 $disp_num = $pre_num * $disp_num; 64 break; 65 case '÷': 66 $disp_num = $pre_num / $disp_num; 67 break; 68 } 69 } 70 $pre_num = $input_num; 71 $ope = $button == '=' ? $ope : $button; 72 break; 73 } 74 75 76} 77 78$pre_button = $button; 79?> 80 81<!DOCTYPE html> 82<html lang="ja"> 83<head> 84 <meta charaset = "utf-8"> 85 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script> 86 <link href="css/bootstrap.min.css" rel="stylesheet"> 87 <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> 88 <script src="js/bootstrap.min.js"></script> 89 <title>PHP電卓 Ajax</title> 90 <link rel="stylesheet" href="styles.css"> 91 92</head> 93<body> 94 95 <div class="calculator"> 96 <p><?php echo convertDispNum($disp_num); ?></p> 97 98 <div class="display"> 99 <form action="?" method="post"> 100 <input type="hidden" name="disp_num" value="<?php echo $disp_num; ?>" /> 101 <input type="hidden" name="pre_num" value="<?php echo $pre_num; ?>" /> 102 <input type="hidden" name="input_num" value="<?php echo $input_num; ?>" /> 103 <input type="hidden" name="pre_button" value="<?php echo $pre_button; ?>" /> 104 <input type="hidden" name="ope" value="<?php echo $ope; ?>" /> 105 </div> 106 107 <table> 108 <tr> 109 <td><button type="submit" name="button" value="C" >C </button></td> 110 <td><button type="submit" name="button" value="CE">CE</button></td> 111 <td><button type="submit" name="button" value="" ></button></td> 112 <td><button type="submit" name="button" value="÷" >÷</button></td> 113 </tr> 114 <tr> 115 <td><button type="submit" name="button" value="7">7</button></td> 116 <td><button type="submit" name="button" value="8">8</button></td> 117 <td><button type="submit" name="button" value="9">9</button></td> 118 <td><button type="submit" name="button" value=""></button></td> 119 </tr> 120 <tr> 121 <td><button type="submit" name="button" value="4">4</button></td> 122 <td><button type="submit" name="button" value="5">5</button></td> 123 <td><button type="submit" name="button" value="6">6</button></td> 124 <td><button type="submit" name="button" value=""></button></td> 125 </tr> 126 <tr> 127 <td><button type="submit" name="button" value="1">1</button></td> 128 <td><button type="submit" name="button" value="2">2</button></td> 129 <td><button type="submit" name="button" value="3">3</button></td> 130 <td><button type="submit" name="button" value=""></button></td> 131 </tr> 132 <tr> 133 <td><button type="submit" name="button" value=" "> </button></td> 134 <td><button type="submit" name="button" value="0">0</button></td> 135 <td><button type="submit" name="button" value=".">.</button></td> 136 <td><button type="submit" name="button" value=""></button></td> 137 </tr> 138 </form> 139 </table> 140 <div> 141 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 142</body> 143</html>
aaaaaaaa👍を押しています

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

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

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

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

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

m.ts10806

2018/08/06 06:30

Ajaxの記述の仕方については調べたのでしょうか。概念的なところが理解できていないとただ実装するだけというのは難しいかもしれません。あとちょっと細かいですが、HTMLの構造がおかしいところがあるので調整された方が良いですね。
whawhawha

2018/08/06 06:41 編集

ありがとうございます。記述方法については主にドットインストール等のサイトで調べてはいるのですが、今自分がやりたいことに対してどう適用していけばよいのかわからない状況です・・・。
m.ts10806

2018/08/06 06:44

回答の方にヒントを書きます。
guest

回答2

0

既に回答で指摘されている通り「非効率なやり方をあえてやろうとしている」ように見えますが、Ajaxを覚えたいとのことでしたらヒントだけ。

Ajaxであろうと何であろうと実は処理フローは変わりません。
リクエストを画面から送り、そのリクエストを受け取って処理した結果をレスポンスとして返却する
部分です。
それがHTMLのフォームからかJavaScriptの通信の仕組みを使っているかの違いです。

JavaScriptからPHPにリクエストを送り、PHPはそのリクエストを受け取って処理した結果をレスポンスとしてJavaScriptに返す。
JavaScriptは受け取ったレスポンスで処理を行う。
それが通常のAjaxの使い方です。

何を送れば良いか、何を返せば良いかは要件次第ですが、
ほとんどの場合、PHP側の処理は変わりません(途中でHTML出力とかしてない限り)
リクエストを受け取るのはAjaxでPOSTで送っていれば$_POSTですし、
レスポンスについても最終的には文字列となります(そこでヘッダを何にするかにもよりますが)

よく使われるのがJSONによるレスポンス返却なので、
そのあたり調べてやってみてはいかがでしょうか。

追記:
ここまでPHP組んでいてドットインストールにいくのは違和感(退行感)ありますね。
いずれにしても簡単な実装をやってみるところからが良いでしょう。
短くて簡単な情報をAjaxでPHPに送り、それが受け取れたら別の情報をレスポンスで返す。
足し算した結果を返すようにすると今回の実装の第一歩としては良いと思いますよ。
いきなり全てやらないことです。階段は1段ずつのぼっていくものですよ。

投稿2018/08/06 06:42

編集2018/08/06 06:46
m.ts10806

総合スコア80765

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

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

whawhawha

2018/08/06 06:54

ありがとうございます。ひとまず簡単な処理から組んでみます。
guest

0

ここから演算処理はPHPでAjaxを使って非同期通信でできるようにしたいと思っています。

電卓の処理であればフロントエンドのJavaScriptだけでじゅうぶん片付くので、わざわざAjaxを取り入れて通信させながら行うようにしても、実装の手間も処理時間も消費するだけで誰も得しないものが出来上がってしまうと思います。

PHPなしで(もしくはHTMLの表示だけにして)、純粋にJavaScriptだけで再実装し直したほうがいいでしょう。

投稿2018/08/06 06:32

maisumakun

総合スコア145121

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

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

m.ts10806

2018/08/06 06:35

課題のにおいがしますね。
whawhawha

2018/08/06 06:46

2日ほど詰まっています笑
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問