我想接受ajax响应。然后在Django模板中显示选择列表属性。我使用ajax请求获取数据,但选择列表组件不显示查询结果。我想在搜索关键字时显示结果查询。当页面加载未填充列表时。只需显示搜索键即可。我向成功响应对象发送成功ajax请求和回调。如何解决此问题
响应对象: {data:“ [{” Code“:” 1001“},{” Code“:” 1100“}]”}
Django模板
{% block body %}
{ % load bootstrap4 %} {# import bootstrap4/bootstrap3 #}
{% load i18n %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css.map" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.min.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.legacy.min.css.map" rel="stylesheet" type="text/css">
<script>
$(document).ready( function () {
$('#select_code').selectize({
valueField: 'code',
labelField: 'code',
searchField: 'code',
options: [],
create: true,
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: 'test/json',
type: 'GET',
dataType: 'json',
data: {
q: query
},
error: function() {
callback();
},
success: function(res) {
console.log(res.data)
callback(res.data)
}
});
}
});
})
</script>
<div class="form-group">
<div class="col-md-12">
<select class="form-control" id="select_code" ></select>
</div>
test_json.py
def test_kolon(request):
q=request.GET.get('q')
db = Test.objects.filter(
Q(code__icontains= q)
).values('code')
list_data_json = json.dumps(list(db))
context={
"data":list_data_json
}
return JsonResponse(context)
答案 0 :(得分:0)
我解决了问题。
list_data_json = json.dumps(list(db))
更改以下代码
list_data_json = jlist(db)
context=list_data_json
return JsonResponse(context,safe=False)