By GokiSoft.com| 12:14 17/06/2020|
Học PHP

[Share Code] Hướng dẫn tạo máy tính bằng PHP - Sử dụng Ajax - GET/POST form trong PHP - Lập trình PHP

Tạo máy tinh căn bản bằng PHP - Calculator in PHP


Bạn có thể xem cách giải khác giải quyết bài này không sử dụng Ajax -> dùng GET/POST trong form submit Hướng dẫn tạo máy tính bằng PHP - Sử dụng GET/POST form trong PHP - Lập trình PHP

#cal-ajax.html


<!DOCTYPE html>
<html>
<head>
	<title>Calculator - Online</title>
	 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-latest.js"></script>
	<style type="text/css">
		table{
			background-color: #ABB1BA;
			margin: auto;
		}
		#result{
			width: 416px;
			height: 70px;
		}
		.btn{
			width: 80px;
			height: 80px;
		}
		#equ{
			width: 80px;
			height: 164px;
		}
		#zero{
			width: 164px;
			height: 80px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td colspan="7"><input id="result" type="text" disabled></td>
		</tr>
		<tr>
			<td><input type="button" class="btn" value="7"></td>
			<td><input type="button" class="btn" value="8"></td>
			<td><input type="button" class="btn" value="9"></td>
			<td><input type="button" class="btn" value="/"></td>
			<td><input type="button" class="btn" value="C"></td>
		</tr>
		<tr>
			<td><input type="button" class="btn" value="4"></td>
			<td><input type="button" class="btn" value="5"></td>
			<td><input type="button" class="btn" value="6"></td>
			<td><input type="button" class="btn" value="*"></td>
			<td><input type="button" class="btn" value="AC"></td>
		</tr>
		<tr>
			<td><input type="button" class="btn" value="1"></td>
			<td><input type="button" class="btn" value="2"></td>
			<td><input type="button" class="btn" value="3"></td>
			<td><input type="button" class="btn" value="-"></td>
			<td rowspan="2"><input id="equ" type="button" class="btn" value="="></td>
		</tr>
		<tr>
			<td  colspan="2"><input type="button" id="zero"  class="btn" value="0"></td>
			<td><input type="button" class="btn" value=","></td>
			<td><input type="button" class="btn" value="+"></td>
		</tr>
	</table>
	<script type="text/javascript">
		var a = '', b = '', cal = '';

		$(function() {
			$('input').click(function() {
				// console.log($(this).val())
				var v = $(this).val()
				switch(v) {
					case '+':
					case '-':
					case '*':
					case '/':
						cal = v
					break;
					case '=':
						//submit data
						onSubmit()
					break;
					case 'AC':
					case 'C':
						a = ''
						b = ''
						cal = ''
					break;
					default:
						if(cal != '') {
							//nhap B
							b += v
						} else {
							//nhap A
							a += v
						}
					break;
				}

				$('#result').val(a + cal + b)
			})
		})

		function onSubmit() {
			console.log(a+cal+b)
			// onSubmitPOST()
			onSubmitGET()
		}

		function onSubmitGET() {
			$.get('cal-ajax.php?a='+a+'&cal='+encodeURIComponent(cal)+'&b='+b, function(data) {
				console.log(data)
				$('#result').val(a+cal+b+'='+data)
			})
		}

		function onSubmitPOST() {
			$.post('cal.php', {
				'a':a,
				'b':b,
				'cal':cal
			}, function(data) {
				console.log(data)
				$('#result').val(a+cal+b+'='+data)
			})
		}
	</script>
</body>
</html>


#cal-ajax.php


<?php
$a = $b = $cal = $result = '';
if (!empty($_GET)) {
	if (isset($_GET['a'])) {
		$a = $_GET['a'];
	}
	if (isset($_GET['b'])) {
		$b = $_GET['b'];
	}
	if (isset($_GET['cal'])) {
		$cal = $_GET['cal'];
	}

	switch ($cal) {
		case '+':
			$result = $a+$b;
			break;
		case '-':
			$result = $a-$b;
			break;
		case '*':
			$result = $a*$b;
			break;
		case '/':
			$result = $a/$b;
			break;
		case '%':
			$result = $a%$b;
			break;
	}
}

// POST
if (!empty($_POST)) {
	if (isset($_POST['a'])) {
		$a = $_POST['a'];
	}
	if (isset($_POST['b'])) {
		$b = $_POST['b'];
	}
	if (isset($_POST['cal'])) {
		$cal = $_POST['cal'];
	}

	switch ($cal) {
		case '+':
			$result = $a+$b;
			break;
		case '-':
			$result = $a-$b;
			break;
		case '*':
			$result = $a*$b;
			break;
		case '/':
			$result = $a/$b;
			break;
		case '%':
			$result = $a%$b;
			break;
	}
}
print($result);


Tags:

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)