【发布时间】：2020-09-07 11:04:40
【问题描述】：
我已经成功地在我的homepage 路径中呈现了图表，但是每当我刷新页面时，我都会丢失任何呈现的内容，而且我不能 100% 确定原因。
# urls.py
urlpatterns = [
path('', chartData.homepage, name='homepage'),
path('chart/', chartData.chart, name='chart'),
path('api/chart/data/', chartData.as_view()),
]
我不确定问题出在哪里，而且我对 Ajax 还很陌生，所以我相信我遗漏了一些东西。
<form autocomplete="off" action="" method="GET">
<div class="autocomplete">
<input id="myInput" type="text" name="Item" placeholder="Enter Item">
</div>
<input type="submit" id="submitBtn" value="Search">
</form>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script type="text/javascript">
var endpoint = 'api/chart/data/'
var dataset = []
var labels = []
$('#submitBtn').click(function(e){
e.preventDefault();
var item = $('#myInput').val();
$('#myInput').val('');
window.history.pushState("object or string", "Title", "/?Item" + item);
$.ajax({
url: endpoint,
method: "GET",
dataType: "text",
success: function(){
$.ajax({
method: "GET",
url: endpoint,
data:{
'item': item,
},
success: function(data){
console.log(itemName)
labels = data.labels
dataset = data.dataset
var ctx = document.getElementById('myChart').getContext('2d')
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: dataset,
fill: false,
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
}
})
},
error: function(error_data){
console.log("error")
console.log(error_data)
}
})
}
})
})
</script>
<!--JavaScript file for autofill functionality in search bar-->
<script src="static/javascript/autofill.js"></script>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
在框中输入“apples”会返回带有正确图表的 url 127.0.0.1:8000/?Item=apples，刷新会返回相同的 url 但没有任何渲染......？
更新 1
cmets代码中的想法，不确定这是否是一个好方法？
<script type="text/javascript">
function createGraph(data, item){
labels = data.labels
dataset = data.dataset
var ctx = document.getElementById('myChart').getContext('2d')
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: dataset,
}],
},
options: {
responsive: true,
maintainAspectRatio: false,
title: { display: true, text: item, fontColor: '#000000', fontSize: 40},
}
})
}
var endpoint = 'api/chart/data/'
var dataset = []
var labels = []
$('#submitBtn').click(function(e){
e.preventDefault();
var itemName = $('#myInput').val();
$('#myInput').val('');
window.history.pushState("object or string", "Title", "/?Item=" + item);
$.ajax({
url: endpoint,
method: "GET",
dataType: "text",
success: function(){
$.ajax({
method: "GET",
url: endpoint,
data:{
'item': item,
},
success: function(data){
createGraph(data, item)
}
})
}
})
})
//checking if jquery string exists outside of function and ajax
//if exists, then you should run the ajax again alongside the createGraph function?
//refreshing page without any values does console.log('False')
//refreshing page with existing jquery string does console.log('Jquery string parameter exists...')
if(location.search){
var item = $('#myInput').val(location.search);
$('#myInput').val('');
console.log('Refreshing page, jquery string value = ' + item)
console.log('Jquery string parameter exists...')
}
else {
console.log('False')
}
</script>
更新 2
按照@Ben 下面所说的，我能够解决刷新问题。我检查了是否存在 Jquery 字符串，如果存在，则通过 Ajax 调用重新呈现图形。
if(location.search){
console.log('Jquery string exists...')
$('#myInput').val('Apples') //replace 'Apples' with var that gets
//jquery string
var item = $('#myInput').val();
console.log('Jquery string value = ' + item)
$('#myInput').val('');
var endpoint = 'api/chart/data/'
var dataset = []
var labels = []
$.ajax({
url: endpoint,
method: "GET",
dataType: "text",
success: function(){
$.ajax({
method: "GET",
url: endpoint,
data:{
'item': item,
},
success: function(data){
createGraph(data, item)
}
})
}
})
}
else{
console.log('False')
}
【问题讨论】：
标签： html jquery django ajax django-views