jsp 通过调用后台controller 保存数据 而不需要跳转页面的操作方法

为实现一小需求,需要在保存一些数据,但是还不要跳转页面。

案例:前端 输入污染物名称 各类参数,用户点击保存 则程序调用后台controller save方法  将数据保存至 数据库,并且点击保存后,页面不需要跳转。

思想:ajax

部分代码展示:

前端:输入参数代码:

<%--参数输入--%>
<div class="mws-panel grid_5">
    <div class="mws-panel-header">
        <span class="mws-i-24 i-table-1">参数输入</span>
    </div>
    <div class="mws-panel-body">
        <form action="" id="polluteForm">
            <div class="mws-panel-toolbar top clearfix">
                <ul>
                    <li><a class="mws-ic-16 ic-add" href="#" onclick="addPollute()">添加</a></li>
                    <li><a class="mws-ic-16 ic-cross" href="#" onclick="delPollute()">减少</a></li>
                    <li><a class="mws-ic-16 ic-printer" href="#">打印表单</a></li>
                    <li><a class="mws-ic-16 ic-disk"
                           onclick="savePollute()">保存参数</a></li>
                </ul>
            </div>

            <table class="mws-table">
                <thead>
                <tr>
                    <th width="180px">待处理污染物名称</th>
                    <th width="180px">污染物浓度</th>
                    <th width="180px">污染物指标</th>
                </tr>
                </thead>
                <tbody id="pollute">
                <%--<tr class="gradeX even">--%>
                <%--<td><input type="text" id="data11" name="polluteName" ></td>--%>
                <%--<td><input type="text" id="data12" name="polluteContent"></td>--%>
                <%--<td><input type="text" id="data13" name="polluteTarget"></td>--%>
                <%--</tr>--%>
                </tbody>
            </table>
            <div id="rowCountC">
                <input type='hidden' name='rowNumC' value='0'>
            </div>
        </form>


    </div>
</div>

后台controller save代码:

 @RequestMapping(value = "insertPollute",method = RequestMethod.POST)
    public void insertPollute(HttpServletRequest request){
        polluteService.clearPollute();
        int rowNum=Integer.parseInt(request.getParameter("rowNumC"));
//        System.out.println(rowNum);
        for(int i=0;i<rowNum;i++){
            Pollute pollute=new Pollute();
            String pollute_id= UUID.randomUUID().toString();
            String pollute_name=request.getParameter("data"+i+"|"+0);
            double pollute_content=Double.parseDouble(request.getParameter("data"+i+"|"+1));
            double pollute_target=Double.parseDouble(request.getParameter("data"+i+"|"+2));
//            System.out.println(pollute_name+pollute_content+pollute_target);
            pollute.setPollute_id(pollute_id);
            pollute.setPollute_name(pollute_name);
            pollute.setPollute_content(pollute_content);
            pollute.setPollute_target(pollute_target);
            polluteService.insertPollute(pollute);
        }
    }

添加ajax 代码:

<script language="JavaScript">

        function savePollute() {
            $.ajax({
                url: '/pollute/insertPollute',
                type: 'POST',
                dataType: 'text',
                data: $('#polluteForm').serialize(),
            })
            alert("数据已保存!")
        }

    </script>

 

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

那二楹

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值