如何在django中使用类似AJAX的视图？

Question

我有一个如图所示的Django应用

我想使用删除图标显示确认弹出窗口，然后从数据库中删除所选条目。通常，我将为此使用AJAX调用和JS。如何在Django中实现？

模板代码：index.html

    <!DOCTYPE html>
{% load staticfiles %}
{% load pm_extras %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'portfolio_management_statics/css/style.css' %}">
</head>
<body>
    <div class="container">
        <h1>Portfolio</h1>
        <form method="post">{% csrf_token %}
<!--            <label for="stock-name">Stock Name: </label><input id="stock-name" name="stock-name" type="text">-->
<!--            <label for="trans-price">Transaction Price </label><input id="trans-price" type="number">-->
<!--            <label for="trans-date">Transaction Date </label><input id="trans-date" type="date">-->
<!--            <label for="quantity">Quantity </label><input id="quantity" type="number">-->
            {{ stock_add_form.as_p }}
            <input type="submit" value="Add Stock">
        </form>
    </div>
    <div class="container">
        <table>
            <tr>
                <th>Stock Name</th>
                <th>Transaction Price</th>
                <th>LTP</th>
                <th>Transaction Quantity</th>
                <th>Transaction Date</th>
                <th>Invested Value</th>
                <th>Current Market Value</th>
                <th>Capital Gains</th>
                <th>Capital Gains %</th>
                <th></th>
            </tr>
            {% for stock in portfolio %}
            <tr>
                <td>{{ stock.stock_name }}</td>
                <td>{{ stock.trans_price1 }}</td>
                <td>{{ stock_ltps | dict_key:stock.stock_name }}</td>
                <td>{{ stock.trans_quantity1 }}</td>
                <td>{{ stock.trans_date }}</td>
                <td>{{ stock_invested_value | dict_key:stock.stock_name }}</td>
                <td>{{ stock_current_value | dict_key:stock.stock_name }}</td>
                <td>{{ stock_gains | dict_key:stock.stock_name }}</td>
                <td>{{ stock_gains_per | dict_key:stock.stock_name }} %</td>
                <td><i class="glyphicon glyphicon-trash"></i></td>
            </tr>
            {% endfor %}
            <tr><th colspan="5">Total</th><th>{{total.total_investment}}</th><th>{{total.total_current_market_value}}</th>
                <th>{{total.total_stock_gain}}</th><th>{{total.total_stock_gain_per}} %</th></tr>
        </table>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
      crossorigin="anonymous"></script>
    <!-- Latest compiled and minified javascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>