Java 简单的基于网络的计算器不会显示结果
因此,我正在研究如何在Tomcat上部署一些基于web的应用程序,到目前为止,我已经在web服务器上运行了一个简单的webapp(localhost:8080/Calculator-1.0-SNAPSHOT/) 但是,我需要应用程序本身的帮助。它不显示计算结果。其他功能也在工作,比如不接受十进制数。代码可在此处找到: 我的控制器中有以下代码:Java 简单的基于网络的计算器不会显示结果,java,tomcat,web-applications,Java,Tomcat,Web Applications,因此,我正在研究如何在Tomcat上部署一些基于web的应用程序,到目前为止,我已经在web服务器上运行了一个简单的webapp(localhost:8080/Calculator-1.0-SNAPSHOT/) 但是,我需要应用程序本身的帮助。它不显示计算结果。其他功能也在工作,比如不接受十进制数。代码可在此处找到: 我的控制器中有以下代码: package com.kirillrublevsky.app.controller; import com.kirillrublevsky.app.s
package com.kirillrublevsky.app.controller;
import com.kirillrublevsky.app.service.CalculatorService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
public class CalculatorController {
@Autowired
private CalculatorService calculatorService;
@ResponseBody
@RequestMapping(value = "/calculate", method = RequestMethod.POST)
public double calculate(@RequestParam(value = "first", required = true) double first,
@RequestParam(value = "operation", required = true) String operation,
@RequestParam(value = "second", required = true) double second) {
return calculatorService.calculate(first, operation, second);
}
}
这是计算器服务代码:
package com.kirillrublevsky.app.service.impl;
import com.kirillrublevsky.app.service.CalculatorService;
import org.springframework.stereotype.Service;
@Service
public class CalculatorServiceImpl implements CalculatorService {
@Override
public double calculate(double first, String operation, double second) {
double result = 0.0;
switch (operation) {
case "+":
result = first + second;
break;
case "-":
result = first - second;
break;
case "*":
result = first * second;
break;
case "/":
result = first / second;
break;
}
return result;
}
}
这是.js脚本:
/* jQuery and AJAX */
$(document).ready(function () {
$("#calculate").click(function (e) {
e.preventDefault();
var first = parseFloat($("#first").val());
var second = parseFloat($("#second").val());
var operation = $("#operation").find("option:selected").text();
$.ajax({
type: "POST",
url: "/calculate",
data: {"first": first, "operation": operation, "second": second},
success: function (data) {
$("#result").text(data);
}
});
});
});
还有index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/resources/css/vendor/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/resources/css/style.css"/>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<input type="number" class="form-control" id="first" required>
</div>
<div class="form-group">
<select class="form-control" id="operation">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
</div>
<div class="form-group">
<input type="number" class="form-control" id="second" required>
</div>
<span id="output"> = <span id="result">0.0</span></span>
</form>
<button id="calculate" type="submit" class="btn btn-danger btn-lg">Calculate</button>
</div>
<script src="/resources/js/vendor/jquery.min.js"></script>
<script src="/resources/js/vendor/bootstrap.min.js"></script>
<script src="/resources/js/app.js"></script>
</body>
</html>
学生用函数计算器
+
-
*
/
= 0.0
算计
欢迎访问stackoverflow.com。这是一个很棒的资源,可以帮助你摆脱困境。在发布问题时,最好发布代码中不起作用的相关部分以及收到的任何错误,以帮助调试过程。祝你好运谢谢你欢迎我来到这个很棒的社区。对不起,我没有收到任何错误消息。但是“计算”按钮似乎没有输出结果。看起来,请在帖子中发布代码的相关部分,而不是发布整个项目的链接。谢谢您的评论。我已经添加了代码的相关部分。:)