Stage 5: submit a form and return the answer directly
Learning path / Stage 5 of 37
mvn spring-boot:run. Use the port specified for this stage and stop with Ctrl+C.Use the same two number fields and five buttons, then send the calculated answer directly to the browser. This stage needs no Model, result.html or template engine.
Download spring-calculator-basic.zip
Form: enter 10 and 5, click Add
-> GET /calculate?a=10&b=5&operation=add
-> @RequestParam reads the three values
-> Java calculates 15.0
-> @ResponseBody sends "10.0 + 5.0 = 15.0"
-> browser displays the answer as text on the next pageThe HTML form uses action="/calculate" and method="get". Inputs named a and b supply the numbers. Only the clicked submit button supplies its operation value. The controller uses @RequestParam to read the values, calculates the result, and returns a String. @ResponseBody tells Spring to send that String directly as response text instead of interpreting it as a template name.
Try and verify: run the project and open http://localhost:8084/. Enter 10 and 5, then click Add. The next page displays 10.0 + 5.0 = 15.0. Use the browser Back button to return to the form. Try every button and division by zero. Remainder (%) is the amount left after division: 20 % 6 = 2.
Port: this project defaults to 8084. Edit src/main/resources/application.properties if needed, restart and use the matching browser address.
Open the files to study in this stage
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Arithmetic Calculator — Stage 5</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<main>
<h1>Arithmetic Calculator</h1>
<p>Enter two numbers and choose an operation.</p>
<form action="/calculate" method="get">
<label for="a">First number</label>
<input id="a" name="a" type="number" step="any" required>
<label for="b">Second number</label>
<input id="b" name="b" type="number" step="any" required>
<div class="buttons">
<button type="submit" name="operation" value="add">Add (+)</button>
<button type="submit" name="operation" value="subtract">Subtract (-)</button>
<button type="submit" name="operation" value="multiply">Multiply (×)</button>
<button type="submit" name="operation" value="divide">Divide (÷)</button>
<button type="submit" name="operation" value="remainder">Remainder (%)</button>
</div>
</form>
<p>The answer opens as text on the next page. Use the browser Back button to calculate again.</p>
<p class="note">Remainder means what is left after division: 20 % 6 = 2.</p>
</main>
</body>
</html>
package com.edupoly.calculator;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class CalculatorController {
@GetMapping("/calculate")
@ResponseBody
public String calculate(
@RequestParam("a") double first,
@RequestParam("b") double second,
@RequestParam("operation") String operation) {
if (!Double.isFinite(first) || !Double.isFinite(second)) {
return "Please enter two finite numbers.";
}
double answer;
String symbol;
switch (operation) {
case "add":
answer = first + second;
symbol = "+";
break;
case "subtract":
answer = first - second;
symbol = "-";
break;
case "multiply":
answer = first * second;
symbol = "×";
break;
case "divide":
if (second == 0) {
return "Cannot divide by zero.";
}
answer = first / second;
symbol = "÷";
break;
case "remainder":
if (second == 0) {
return "Cannot calculate a remainder with zero as the divisor.";
}
answer = first % second;
symbol = "%";
break;
default:
return "Please choose one of the five operations.";
}
if (!Double.isFinite(answer)) {
return "The result is too large. Please use smaller numbers.";
}
return first + " " + symbol + " " + second + " = " + answer;
}
}
The ZIP includes the complete setup and a README.html. Stage 6 introduces templates through a product table and details page. Stage 7 then adds a template to this calculator.
After Stage 5: the Spring words to recognize
Focus: Let the HTML form build the request we previously typed ourselves.
| Term | Our concrete example | Its place in Spring |
|---|---|---|
| Form parameters | The fields named a and b supply the numbers to /calculate. | The browser creates a GET query string; Spring MVC reads it using @RequestParam. |
| Clicked button value | Clicking Add submits operation=add. | The controller receives the button value as a request parameter and chooses the calculation. |
| @ResponseBody — reused | The browser displays the controller's returned text on the next page. | Spring MVC sends the response directly; no result template is selected. |
You should now be able to say: The form sends numbers and an operation; Java calculates and returns a text response.
One small check: Which part of the request tells the controller whether to add or multiply?
Concepts used in this stage
Use the right column for a quick reminder, or open a concept above for its full explanation.