前提・実現したいこと
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>