如何让查询和查询结果显示在同一个页面

后端controler层已经获取到数据，查询的数据

img

查询页面

img


<body>
<form action="" method="post" id="bgcha">
    查询<input type="text" name="zdid" style="width: 200px; height: 25px;margin-left: 20px" id="zdid">
    <button type="submit" class="layui-btn layui-btn-warm layui-btn-radius" onclick="cha()">
        <p style="margin-top: -3px;color: black;font-weight: bold">查询</p></button>
    查询结果显示<input type="text" style="width: 200px; height: 25px;margin-left: 20px">
</form>
</body>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    function cha() {
        document.getElementById("bgcha").action="/zd/cha",
            document.getElementById("bgcha").submit()
    }
</script>

自己发ajax取数据就行了

后台的queryAll()方法上加@ResponseBody注解，前端用异步ajax请求后台接口，将返回的数据用js渲染页面上就行了

用ajax，然后在ajax返回结果里面拼接网页前端代码