目录
效果图：
项目目录：
代码说明：
文件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")
@ResponseBody
double 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"> </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错误
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
