Django 使用来自 Ajax 的成功数据更新模板 div

Question

我有 select 选项并选择选项我运行 ajax 以从我的 model 中获取过滤数据。 以下是我的看法：

我的带有脚本和控制台日志的模板也在下面更新：

我需要帮助如何使用成功（书籍）ajax 获取的新列表更新模板中的列表。 （ $('#stock_list').html([books]) 没有更新列表）

视图.py

def get_stock_list(request):
if request.method == "GET":
    book_type = request.GET.get('book_type')
    books = list(TextBook.objects.filter(type=book_type).values())
    return JsonResponse({"books": books})

stock_report.html：

 {% extends 'wstore_base_generic.html' %}

 {% block content %}
 <div class="row">
  <div class="col-lg-12 mt-4">
    <div class="card shadow"  id="stock_report">
        <div class="card-header text-center">                
            <h3 class="display-5">
                Stock Report
            </h3>
             <div class="text-right">


            <h5>
                <select id="book_type" name="book_type" >
                <option  value="" selected="selected">---SELECT---</option>
                   {% regroup books by type as type_list %}
                      {% for type in type_list %}
                            <option value="{{ type.grouper }}">{{ type.grouper }}</option>
                        {% endfor %}
                 </select> </h5>
             </div>
        </div>
        <div class="card-body" id="stock_list">
            <table id="customers" >
                <thead>
                    <tr>
                        <th>Item Code</th>
                        <th>Item Description</th>
                        <th>Open Qty</th>
                        <th>Received qty</th>
                        <th>Return Qty</th>
                        <th>Issue Qty</th>
                        <th>Adj Qty</th>
                        <th>Balance Qty</th>
                    </tr>                        
                </thead>
                <tbody>

                    {% if books %}

                    {% for book in books %}
                    <tr>

                        <td> <a href="{% url 'select_stock_report' book.id %}">{{ book.code }}</a></td>
                        <td>{{book.name}}</td>
                        <td>{{book.open_qty}}</td>
                        <td>{{book.recived_qty}}</td>
                        <td>{{book.return_qty}}</td>
                        <td>{{book.issue_qty}}</td>
                        <td>{{book.adj_qty}}</td>
                        <td>{{book.bal_qty}}</td>
                    </tr>
                    {% endfor %}
                    {% else %}
                        <tr class="text-center">
                            <td colspan="4">No Transaction have been made yet</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>                
        </div>            
    </div>
    <div class="card">
        <div class="card-footer">
            <button class="btn btn-success" id="print_stock" 
onclick="printDiv('stock_report')">Print</button>
        </div>
    </div>
</div>
</div>
{%  endblock %}
{% block js %}
<script>

 $(document).on('change', '#book_type', function(){
   var that = $(this)
 $.ajax(
    {
        type: "GET",
        url: "/get_stock_list",
        dataType: "json",
        data: {
            'book_type': $(this).val(),
            'csrfmiddlewaretoken': '{{csrf_token}}'
        },
        success: function (books) {
            console.log(books);
            $('#stock_list').html([books]);



        }
    })})
 </script>
 {% endblock %}

我得到了 console.log(books)

 {books: array(4)}

 {
     "books": [
    {
        "id": 1,
        "code": "LKG001",
        "type": "BOOK",
        "name": "LKG BOOK 1",
        "open_qty": "0",
        "recived_qty": "328",
        "return_qty": "0",
        "issue_qty": "111",
        "adj_qty": "4",
        "bal_qty": "213",
        "avgcost": "100.55",
        "price": "100.00"
    },
    {
        "id": 2,
        "code": "UKG001",
        "type": "BOOK",
        "name": "UKG BOOK 1",
        "open_qty": "0",
        "recived_qty": "17",
        "return_qty": "0",
        "issue_qty": "9",
        "adj_qty": "0",
        "bal_qty": "8",
        "avgcost": "200.00",
        "price": "200.00"
    },
    {
        "id": 3,
        "code": "UKG002",
        "type": "BOOK",
        "name": "UKG002 BOOKS",
        "open_qty": "0",
        "recived_qty": "0",
        "return_qty": "0",
        "issue_qty": "0",
        "adj_qty": "1",
        "bal_qty": "-1",
        "avgcost": "0.00",
        "price": "200.00"
    },
    {
        "id": 4,
        "code": "001",
        "type": "BOOK",
        "name": "001 TEST",
        "open_qty": "0",
        "recived_qty": "0",
        "return_qty": "0",
        "issue_qty": "0",
        "adj_qty": "0",
        "bal_qty": "0",
        "avgcost": "0.00",
        "price": "0.00"
    }
 ]
 }

Answer 1

As your data return is json you can use $.each loop to iterate through your json array then use value.keyname to get value from json and append these values inside tds and finally add this html generated inside your table tbody.

演示代码：

 //suppose this is return from ajax var books = { "books": [{ "id": 1, "code": "LKG001", "type": "BOOK", "name": "LKG BOOK 1", "open_qty": "0", "recived_qty": "328", "return_qty": "0", "issue_qty": "111", "adj_qty": "4", "bal_qty": "213", "avgcost": "100.55", "price": "100.00" }, { "id": 2, "code": "UKG001", "type": "BOOK", "name": "UKG BOOK 1", "open_qty": "0", "recived_qty": "17", "return_qty": "0", "issue_qty": "9", "adj_qty": "0", "bal_qty": "8", "avgcost": "200.00", "price": "200.00" }, { "id": 3, "code": "UKG002", "type": "BOOK", "name": "UKG002 BOOKS", "open_qty": "0", "recived_qty": "0", "return_qty": "0", "issue_qty": "0", "adj_qty": "1", "bal_qty": "-1", "avgcost": "0.00", "price": "200.00" }, { "id": 4, "code": "001", "type": "BOOK", "name": "001 TEST", "open_qty": "0", "recived_qty": "0", "return_qty": "0", "issue_qty": "0", "adj_qty": "0", "bal_qty": "0", "avgcost": "0.00", "price": "0.00" } ] } /*$(document).on('change', '#book_type', function(){ var that = $(this) $.ajax( { type: "GET", url: "/get_stock_list", dataType: "json", data: { 'book_type': $(this).val(), 'csrfmiddlewaretoken': '{{csrf_token}}' }, success: function (books) { console.log(books);*/ var html = ""; //loop through json array return $.each(books.books, function(key, value) { //append tr html += `<tr> <td> <a href="{% url 'select_stock_report' ${value.id} %}">${ value.code }</a></td><td>${value.name}</td><td>${value.open_qty}</td><td>${value.recived_qty}</td><td>${value.return_qty}</td><td>${value.issue_qty}</td><td>${value.adj_qty}</td><td>${value.bal_qty}</td></tr>` }) $('#stock_list tbody').html(html); //add datas inside tbody /* } })})*/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card-body" id="stock_list"> <table id="customers"> <thead> <tr> <th>Item Code</th> <th>Item Description</th> <th>Open Qty</th> <th>Received qty</th> <th>Return Qty</th> <th>Issue Qty</th> <th>Adj Qty</th> <th>Balance Qty</th> </tr> </thead> <tbody> <!--data will come here --> </tbody> </table> </div>