bootstrap-table 和Spring Boot使用Ajax交互数据 json格式

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;
    }



}
大T笔记所有文章均为本人原创,转载请您注明来源,并留下原文链接地址,是对我的尊重,也是对知识的尊重,谢谢!
大T笔记 » bootstrap-table 和Spring Boot使用Ajax交互数据 json格式

大T笔记-我的个人互联网创业和自由职业之路

关于我 我的百宝箱
大T笔记-专注个人互联网创业和自由职业