Spring如何使用jquery / javascript通过ID删除?

时间:2019-07-09 06:35:09

标签: javascript java jquery spring spring-boot

我一直想按ID删除行。 我已经完成了Service,Controller,Listfiles和Delete文件中的“操作”。

这是控制器

  @RequestMapping("/hapussertifikasi")
    public String hapussertifikasi() {
        return ("sertifikasi/hapussertifikasi");
    }

    @ResponseBody
    @RequestMapping(value = "/hapussertifikasi/{angka}", method = RequestMethod.DELETE)
    public Map<String, String> hapussertifikasi(@PathVariable("angka") Long angka, Model model) {
        sertifikasisr.hapus(angka);
        // key value
        Map<String, String> map = new HashMap<>();
        // pakai String string karena value key dan value nya string
        System.out.println();
        System.out.println(angka);
        map.put("status", "berhasil");
        // DARI BARANG SERVICE
        /*
         * if(brngsr.hapus(angka)) { // key value map.put("status", "berhasil"); }else {
         * map.put("status", "gagal"); }
         */

        return map;
    }

这是服务文件

 public boolean hapus(Long id) {
        try {
            sertifikasi.deleteById(id);
            return true;
        }catch(Exception e) {
            return false;
        }
    }

这是列表文件

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

    <!-- Nulis table didalam body -->
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                <td>ID</td>
                    <td>Nama Sertifikasi</td>
                    <td>Penerbit</td>
                    <td>Masa Berlaku</td>
                    <td>#</td>
                </tr>
            </thead>
            <tbody id="idTbodySertifikasi">
                <tr th:each="item :${keysertifikasi}">
                <td th:text="${item.id}">ID</td>
                    <td th:text="${item.certificate_name}">NamaBarang</td>
                    <td th:text="${item.publisher}">JenisBarang</td>
                    <td th:text="${item.until_year + '-' + item.until_month }">Sampai</td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-primary dropdown-toggle" type="button"
                                data-toggle="dropdown">
                                More <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li class="clDropdown" data-value="0"><a href="#">Ubah</a></li>
                                <li class="clDropdown" data-value="1"><a href="#">Hapus</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        $('.table-responsive').on('show.bs.dropdown', function() {
            $('.table-responsive').css("overflow", "inherit");
        });

        $('.table-responsive').on('hide.bs.dropdown', function() {
            $('.table-responsive').css("overflow", "auto");
        });

        $(".clDropdown").click(function() {
            debugger;
            var x = $(this).data('value');
            var angka = $(this).attr('data-idbarang');
            if (x == 0) {
                $.ajax({
                    url : './ubahsertifikasi',
                    method : 'Get',
                    success : function(model) {
                        debugger;
                        /* jahit model return dari controller ke body modal */
                        $('#idMdlBodyUbahSertifikasi').html(model);
                        /* pop up modalnya */
                        $('#idMdlUbahSertifikasi').modal('show');
                    },
                    error : function(model) {
                        debugger;
                    }
                });
            } else if (x == 1) {
                debugger;
                $.ajax({
                    url : './hapussertifikasi',
                    method : 'Get',
                    success : function(model) {
                        debugger;
                        /* jahit model return dari controller ke body modal */
                        $('#idMdlBodyHapusSertifikasi').html(model);
                        /* pop up modalnya */
                        $('#idMdlHapusSertifikasi').modal('show');
                    },
                    error : function(model) {
                        debugger;
                    }
                });
            }
        });
    </script>
</body>
</html>

最后这是放置删除按钮的删除文件

 <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-2">
                <i class="glyphicon glyphicon-trash center" style="font-size: 50px"></i>
            </div>
            <div class="col-xs-8">
                <div class="clTulisanHapus center" id="idTulisanHapus">Anda
                    Yakin ingin menghapus Pelatihan?</div>
            </div>
        </div>
    </div>
    <div class="col-md-offset-8">
        <div class="btn-group">
            <button type="button" id="idBtnHapusBatal" class="btn clBtnMdlHapus">Tidak</button>
            <button type="button" id="idBtnHapusHapus" class="btn clBtnMdlHapus">Ya</button>
        </div>
    </div>

    <script>
        $('#idBtnHapusHapus').click(function() {
            var angka = $(this).attr('data-id');
            debugger;
            debugger;
            $.ajax({
                url : '/hapussertifikasi/' + angka,
                type : 'DELETE',

                success : function(model) {
                    debugger;
                    window.location = './sertifikasi'

                },
                error : function(model) {
                    debugger;
                }
            });
        });
    </script>
</body>
</html>

ID显示正常,但ID值未发送到Controller文件。

2 个答案:

答案 0 :(得分:0)

嗨,兄弟,我也面临这类问题.....

经过长期的研发,我找到了解决方案,但是我不知道为什么它能起作用。

尝试

url : 'hapussertifikasi/' + angka,

只需先移除/唱歌

答案 1 :(得分:0)

按钮<button type="button" id="idBtnHapusHapus" class="btn clBtnMdlHapus">Ya</button>没有data-id属性,因此在调用var angka = $(this).attr('data-id');时,angka为Nil。

这意味着您正在/hapussertifikasi/上执行删除请求,这将返回400错误,因为您没有传递必需的参数(正确的语法为/hapussertifikasi/14,其中{{1} }是您要删除的ID。)