從資料庫中洗掉記錄的按鈕不起作用。休息阿賈克斯-有解無憂

所以，當你點擊“洗掉”按鈕時，表中的資料并沒有被洗掉，即什么也沒有發生。
控制臺中沒有錯誤。貌似這里基本沒有處理洗掉功能。

控制臺螢屏截圖

如何解決這個問題？

我的檔案：

索引.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);
                }
            });
        });
});

休息控制器

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

這部分在另一個 .js 檔案中：

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

按下按鈕后，會彈出一個視窗。我單擊確定，我必須手動重繪頁面以更新資料庫本身。如何讓這一切自動發生？

單擊洗掉按鈕后的頁面

uj5u.com熱心網友回復：

上次更新后，我能夠處理這個問題。它只有一行。兩個檔案中的最終解決方案/更改：

        $(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('')));
            });
            
});

現在一切正常。萬歲！：）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361134.html

標籤：javascript 查询阿贾克斯休息

上一篇：如何使用回圈在文本框中顯示陣列資料？（每個陣列資料一個文本框）

下一篇：使用RazorPagePartial創建動態html日期表