效果图：

项目目录：

代码说明：

文件1：服务器 StartTheServer

package boot._37;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class StartTheServer {public static void main(String[] args) {SpringApplication.run(StartTheServer.class, args);}}

文件2：控制器 CalController

package boot._37;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
public class CalController {//        fetch(`http://localhost:8080/cal?p=${p}&m=${m}&yr=${yr}`)@RequestMapping("/37/cal_1")@ResponseBodydouble cal(double p, double yr, int m) {double mr = yr / 12 / 100.0;double pow = Math.pow(1 + mr, m);double payment = p * mr * pow / (pow - 1);return payment * m;}
}

文件3：Html网页： cal_1.html

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>贷款计算器</title><style>body {font-size: 0.9em;}#detailResult td, #detailResult th{text-align: left;border-bottom: 1px gray solid;}#totalResult {display:none;}#totalResult td{padding-right: 10px;}</style>
</head>
<body>
<table class="c_table" cellspacing="1" cellpadding="0" border="0"><tr><td colspan="2"  class="caltitle">按揭贷款计算器(等额本息还款/等额本金还款)</td></tr><tr><td width="40%" class="left">贷款金额</td><td width="60%" class="right"><input type="number"  id="principal" class="inputtxt" maxlength="20" value="100000"/>元</td></tr><tr><td width="40%" class="left">贷款期限</td><td width="60%" class="right"><input type="number"  id="months" class="inputtxt" maxlength="3" value="10"/>月（1-360）</td></tr><tr><td width="40%" class="left">贷款年利率</td><td width="60%" class="right"><input type="number"  id="annualInterestRate" class="inputtxt" maxlength="20" value="6"/>% </td></tr><tr><td width="40%" class="left"></td><td width="60%" class="right"><input type="button" value="总还款额" id="calculate"><input type="button" value="总还款额及详情" id="calculateDetail"></td></tr><tr><td colspan="2">&nbsp;</td></tr>
</table>
<div id="error" style="color:red;"></div>
<br>
<table id="totalResult" class="c_table" cellspacing="1" cellpadding="0" border="0"><tr><td width="20%">还款总额</td><td width="30%" id="totalRepayment"></td><td width="20%">利息总额</td><td width="30%" id="totalInterestRepayment"></td></tr>
</table>
<table id="detailResult" style="display:none" class="c_table" cellspacing="1" cellpadding="0" border="0"><thead><tr><th width="10%">月份</th><th width="30%">还月供=(还本金+还利息)</th><th width="20%">还本金</th><th width="20%">还利息</th><th width="20%">待偿还本金</th></tr></thead><tbody id="tbody"></tbody>
</table>
<script>function test1() {document.getElementById("error").innerText = '';const p = document.getElementById("principal").value; // 贷款金额const m = document.getElementById("months").value;    // 贷款月数const yr = document.getElementById("annualInterestRate").value; // 年利率fetch(`http://localhost:8080/cal?p=${p}&m=${m}&yr=${yr}`).then(resp=>resp.text()).then(text=>{if(isJson(text)){let json = JSON.parse(text);if(json.status === 404 || json.status === 500) {if(json.message) {document.getElementById("error").innerText = json.message;} else {document.getElementById("error").innerText = json.error;}json = ["-", "-"];}const div = document.getElementById("totalResult");document.getElementById("totalRepayment").innerText = json[0];document.getElementById("totalInterestRepayment").innerText = json[1];} else {document.getElementById("totalRepayment").innerText = text;}});}function test2() {document.getElementById("error").innerText = '';const p = document.getElementById("principal").value;const m = document.getElementById("months").value;const yr = document.getElementById("annualInterestRate").value;fetch(`http://localhost:8080/details?p=${p}&m=${m}&yr=${yr}`).then(resp=>resp.json()).then(json=>{if(json.status === 404 || json.status === 500) {if(json.message) {document.getElementById("error").innerText = json.message;} else {document.getElementById("error").innerText = json.error;}json = [];}const tbody = document.getElementById("tbody");for(let i = 0; i < json.length; i++){const tr = document.createElement("tr");const td0 = document.createElement("td");const td1 = document.createElement("td");const td2 = document.createElement("td");const td3 = document.createElement("td");const td4 = document.createElement("td");td0.innerText = json[i][0];td1.innerText = json[i][1];td2.innerText = json[i][2];td3.innerText = json[i][3];td4.innerText = json[i][4];tr.appendChild(td0);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tbody.appendChild(tr);}});}function isJson(str) {try {let json = JSON.parse(str);if(typeof json === "object"){return true;}return false;} catch(e) {return false;}}document.getElementById("calculate").onclick = function() {const div1 = document.getElementById("totalResult");div1.style.display = "block";const div2 = document.getElementById("detailResult");div2.style.display = "none";const tbody = document.getElementById("tbody");tbody.innerHTML = "";test1();}document.getElementById("calculateDetail").onclick = function() {const div1 = document.getElementById("totalResult");div1.style.display = "block";const div2 = document.getElementById("detailResult");div2.style.display = "block";const tbody = document.getElementById("tbody");tbody.innerHTML = "";test1();test2();}
</script>
</body>
</html>

存在问题：

似乎controller无法将计算的结果顺利返回给js，导致not found

问题已经解决:

代码修改位置：

修改为

fetch(`http://localhost:8080/37/cal_1?p=${p}&m=${m}&yr=${yr}`)

fetch（中文是去并取回的意思）的作用目前有个猜测：url是把html网页的数据发送给服务器端，.then(resp=>resp.text)是获取Controller中return回来的数据。因此url的地址不对会导致Controller无传入数据，自然导致Not Found错误

Java速成：37-贷款计算器相关推荐

acm教程 java版_ACM之java速成 (转)
//这里指的java速成,只限于java语法,包括输入输出,运算处理,字符串和高精度的处理,进制之间的转换等,能解决OJ上的一些高精度题目. //1. 输入: // 格式为:Scanner cin = ...
acm教程 java版_[转]ACM之java速成
这里指的java速成,只限于java语法,包括输入输出,运算处理,字符串和高精度的处理,进制之间的转换等,能解决OJ上的一些高精度题目. 1. 输入: 格式为:Scanner cin = new Sc ...
jenkins构建项目报错：java:[17,37] package xx.xx.xxx does not exist
场景描述今天遇到了一个很奇怪的问题,在IDEA运行正常的项目,发布到jenkins就会报错: [ERROR] COMPILATION ERROR : [INFO] ----------------- ...
Java速成学习小结
目录关于Java Java安装 Java基本语法主函数注释基本数据类型声明变量: final 关键字: 数组: 两类循环: 尾巴有话说关于Java Java是一种广泛被使用的 ...
【Java速成教学】桌球游戏项目_教你用最短的时间开发桌球小游戏_Java初学者项目
Java小游戏项目回归!今天给大家带来的是桌球游戏~ 本课程面向刚入门或者有一定Java基础的人群,帮助学员理解面向对象编程,并将基础知识进行实际应用,最终目标为开发出一个功能强大的桌球游戏.[Jav ...
Java速成篇-Day02笔记
Java速成篇-Day02笔记课程:30-C/S架构 ① C/S架构的基本构成 C,Client:客户端,可以用浏览器代替.浏览器是Brower,此时更准确的叫B/S架构. S,Server:服务器 ...
3个月Java速成记，一文记录Java学习过程
3个月时间掌握Java基础知识,分享楼主的学习心路历程. 往期精选(欢迎转发~~) 如何看待程序员35岁职业危机? Java全套学习资料(14W字),耗时半年整理我肝了三个月,为你写出了GO核心手 ...
java速成慕课_Java正则速成秘籍之招式篇
导读正则表达式是什么?有什么用? 正则表达式(Regular Expression) 是一种文本规则,可以用来校验 . 查找 . 替换与规则匹配的文本. 又爱又恨的正则正则表达式是一个强大的文 ...
JAVA练习题37：拼图小游戏
第一个小项目:拼图小游戏暂不完善,因为没有链接数据库,用户名和密码只是暂存在集合中资料图片资料整个项目源码界面展示代码: 一.主程序(入口)App import com.qi.ui.Gam ...
【最新版】Java速成路线（急于找工作！）
文章目录计算机网络分层结构 TCP/UDP HTTP/HTTPS 状态码 Cookie 和 Session URI和URL 操作系统线程和进程数据结构和算法数据结构算法设计模式(23种) ...

Java速成：37-贷款计算器

效果图：

代码说明：

存在问题：

Java速成：37-贷款计算器相关推荐

最新文章

热门文章