【发布时间】：2021-07-14 16:01:57
【问题描述】：
我有选择选项和选择选项我运行 ajax 从我的模型中获取过滤后的数据。以下是我的看法：
我的带有脚本和控制台日志的模板也在下面更新：
我需要帮助如何使用success(books) 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"
}
]
}
【问题讨论】：
-
也许不是返回 JSON 响应，而是返回 HTML 响应，以便您可以轻松地将 DOM 中的相关部分替换为从 AJAX 调用中接收到的 HTML。
标签： javascript django ajax list view