从数据库中删除记录的按钮不起作用。 rest ajax

Question

因此，当您单击“删除”按钮时，表中的数据不会被删除，即没有任何反应。
控制台中没有错误。 看来删除function这里基本不处理了。

如何解决这个问题？

我的文件：

索引.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cars Selling</title>

<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="listCarsSelling.js"></script>
<script src="delete.js"></script>
</head>
<body>
    <h2>Cars Selling List</h2>
    <p><a href="/insert">Insert new position</a></p>

    <table border="1" cellspacing="0" cellpadding="5">
        <tr>
            <th>code</th>
            <th>manufacturer</th>
            <th>model</th>
            <th>color</th>
            <th>transmission</th>
            <th>body_type</th>
            <th>price</th>
            <th>action</th>
        </tr>
    </table>

</body>
</html>

listCarsSelling.js

$(document).ready(function() {
            $.getJSON('/ListCarsSelling', function(json) {
                var tr=[];
                for (var i = 0; i < json.length; i++) {
                    tr.push('<tr>');
                    tr.push('<td>' + json[i].code + '</td>');
                    tr.push('<td>' + json[i].manufacturer + '</td>');
                    tr.push('<td>' + json[i].model + '</td>');
                    tr.push('<td>' + json[i].color + '</td>');
                    tr.push('<td>' + json[i].transmission + '</td>');
                    tr.push('<td>' + json[i].body_type + '</td>');
                    tr.push('<td>' + json[i].price + '</td>');
                    tr.push('<td><button id="updatePosition">Update</button>&nbsp;&nbsp;'
                    + '<button id="deletePosition">Delete</button></td>');
                    tr.push('</tr>');
                }
                $('table').append($(tr.join('')));
            });
});

删除.js

$(document).ready(function() {
        $('#deletePosition').click(function() {
            var code = $(this).attr('code');

            $.ajax({
                url: '/ListCarsSelling/'+code,
                method: 'DELETE',
                contentType: "application/json",
                dataType : 'json',
                success: function () {
                    window.location = '/'
                },
                error: function (error) {
                    alert(error);
                }
            });
        });
});

Rest Controller

package lab3.Controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import lab3.DAO.CarSellingDAO;
import lab3.Model.CarSelling;

@RestController
public class CarSellingController {
    
    @Autowired
    private CarSellingDAO csDAO;
    
    @DeleteMapping("/ListCarsSelling/{code}")
    public String delete(@PathVariable Integer code) {
        return csDAO.deletePosition(code) + " position delete from the database";
    }
/*...other*/
}

在我更新之后，现在一切都或多或少地工作了。 但是，删除后重新加载页面存在问题。 这是我更改的内容：

        $(document).on( "click" ,"#deletePosition", function() {
            var code = $(this).attr('value');
            console.log(code);
            $.ajax({
                url: '/ListCarsSelling/'+code,
                type: 'DELETE',
                contentType: "application/json",
                dataType : 'json',
                success: function () {
                    window.location = '/'
                },
                error: function (error) {
                    alert(error);
                }
            });
});

这部分在 another.js 文件中：

+ '<button id="deletePosition" value='+json[i].code+'>Delete</button></td>');

按下按钮后，弹出一个window。 我单击确定，我必须手动刷新页面以更新数据库本身。 如何让这一切自动发生？

点击删除按钮后的页面

Answer 1

上次更新后，我能够处理这个问题。 它只有一行。 最终解决方案/两个文件中的更改：

        $(document).on( "click" ,"#deletePosition", function() {
            var code = $(this).attr('value');
            var rowToDelete = $(this).closest('tr');
            console.log(code);
            $.ajax({
                url: '/ListCarsSelling/'+code,
                type: 'DELETE',
                contentType: "application/json",
                //dataType : 'json', //<---success was not processed because of this
                success: function () {
                    rowToDelete.remove(); //<--- it's better than reloading the page. Just remove line from html
                },
                error: function (error) {
                    alert(error);
                }
            });
});

$(document).ready(function() {
            $.getJSON('/ListCarsSelling', function(json) {
                var tr=[];
                for (var i = 0; i < json.length; i++) {
                    tr.push('<tr>');
                    tr.push('<td>' + json[i].code + '</td>');
                    tr.push('<td>' + json[i].manufacturer + '</td>');
                    tr.push('<td>' + json[i].model + '</td>');
                    tr.push('<td>' + json[i].color + '</td>');
                    tr.push('<td>' + json[i].transmission + '</td>');
                    tr.push('<td>' + json[i].body_type + '</td>');
                    tr.push('<td>' + json[i].price + '</td>');
                    tr.push('<td><button id="updatePosition">Update</button>&nbsp;&nbsp;' // <--- the refresh button has yet to be updated, but that's a completely different story
                    + '<button id="deletePosition" value='+json[i].code+'>Delete</button></td>');
                    tr.push('</tr>');
                }
                $('table').append($(tr.join('')));
            });
            
});

现在一切正常。 万岁::)

从数据库中删除记录的按钮不起作用。 rest ajax

问题描述

1 个解决方案

解决方案1
0 2021-11-18 17:27:19

从数据库中删除记录的按钮不起作用。 rest ajax

问题描述

1 个解决方案

解决方案1 0 2021-11-18 17:27:19

解决方案1
0 2021-11-18 17:27:19