html:
提交的form表单：
<h3 class="page-header">输入业务节点数据</h3>
<form method="post" role="form" class="form-inline">
<div class="form-group input-daterange">
<!-- <input type="text" id="reqInfo" class="form-control" placeholder="" style="width: 500px" />-->
<textarea id="reqInfo" class="form-control" style="width: 600px;height: 300px;" /></textarea>
<button type="submit" class="form-control btn btn-success" id="submit-btn" >OK</button>
</div>
</form>BootStrap-table的表格：
<!--表格-->
<div class="tab-pane fade in active" id="tab2">
<table data-toggle="table" id="reportTable" data-height="500" >
<thead>
<tr>
<!-- <th data-field="voucherID" data-align="right">凭证ID</th>-->
<th data-field="abstractInfo" data-align="right">摘要</th>
<th data-field="accountName" data-align="right">科目</th>
<th data-field="credit" data-align="right">贷方金额</th>
<th data-field="debit" data-align="right">借方金额</th>
<!-- <th data-field="direct" data-align="right">借贷方向</th>-->
</tr>
</thead>
</table>
</div>tml页面中引入verify.js:
<script type="text/javascript" src="/js/verify.js"></script>完整的html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>会计分录校验器</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.js"></script>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-table.css">
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">会计分录校验器</a>
</div>
</div>
</nav>
<div class="container-fluid">
<!--侧边栏-->
<div class="row">
<!--左边栏-->
<!-- <div class="col-sm-3 col-md-2 sidebar">-->
<!-- <ul class="nav nav-sidebar">-->
<!-- <li><a href="/todo">任务列表</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!--右边展示-->
<!--右边展示-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" xmlns="" style="padding-top: 50px;">
<!--第一部分 开始-->
<!-- <h1 class="page-header">业务场景产生分录校验</h1>-->
<h3 class="page-header">输入业务节点数据</h3>
<form method="post" role="form" class="form-inline">
<div class="form-group input-daterange">
<!-- <input type="text" id="reqInfo" class="form-control" placeholder="" style="width: 500px" />-->
<textarea id="reqInfo" class="form-control" style="width: 600px;height: 300px;" /></textarea>
<button type="submit" class="form-control btn btn-success" id="submit-btn" >OK</button>
</div>
</form>
<div class="row placeholders">
<!--展示区-->
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div class="col-xs-12 col-sm-8 col-lg-11 placeholder" style="height:100px;" id="main">
</div>
</div>
<!--第一部分 饼图 结束-->
<!--第二部分 表格 开始-->
<h3 class="page-header">会计分录</h3>
<div id="myTabContent" class="tab-content">
<!--表格-->
<div class="tab-pane fade in active" id="tab2">
<table data-toggle="table" id="reportTable" data-height="500" >
<thead>
<tr>
<!-- <th data-field="voucherID" data-align="right">凭证ID</th>-->
<th data-field="abstractInfo" data-align="right">摘要</th>
<th data-field="accountName" data-align="right">科目</th>
<th data-field="credit" data-align="right">贷方金额</th>
<th data-field="debit" data-align="right">借方金额</th>
<!-- <th data-field="direct" data-align="right">借贷方向</th>-->
</tr>
</thead>
</table>
</div>
</div>
<!--第二部分 表格 结束-->
</div>
</div>
</div>
<script type="text/javascript" src="/js/verify.js"></script>
</body>
</html>verify.js
//使用Ajax提交数据
$(function() {
//点击按钮发送数据
$("#submit-btn").click(function (event) {
//关闭表单里面的按钮默认行为
event.preventDefault();
reqVerifyAjax();
})
});
//使用Ajax提交数据
function reqVerifyAjax(){
$.ajax({
type : "POST",
url : "/verifyAjax",
data : $("#reqInfo").val(),
contentType: 'application/json',
success : function (result) {
// alert(result.toString());
$("#reportTable").bootstrapTable('load', result);
}
})
}
VerifyController.java
package com.yunduyun.verifyjournalentry.controller;
import com.yunduyun.verifyjournalentry.service.VerifyService;
import com.yunduyun.verifyjournalentry.vo.JournalEntry;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
/**
* @program: verify_journal_entry
* @description:
* @author: Liu Tao
* @create: 2021-10-27 21:46
**/
@Controller
public class VerifyController {
@Autowired
private VerifyService verifyService;
@RequestMapping("/verify")
public String verify(){
return "/verify";
}
@RequestMapping(value ="/verifyAjax",
method = RequestMethod.POST,
consumes="application/json")
@ResponseBody
public List<JournalEntry> verifyAjax(@RequestBody String jsonParamStr){
System.out.println("ss");
if (jsonParamStr == null) {
return null;
}
System.out.println(jsonParamStr);
List<JournalEntry> journalEntries= verifyService.verify(jsonParamStr);
return journalEntries;
}
}