我在Djnago工作，我想在不重新加载或刷新页面的情况下更新图像。我已经使用Ajax for get方法来接收图像，它也在工作，但要看到新的图像，我必须刷新页面。该图像是通过views.py文件中的bfs_view方法生成的。首先，它接收作为文本的输入，然后根据给定的输入生成新的图像。
views.py文件：
# def product_create_view(request):
def bfs_view(request):
form = BFSForm(request.POST or None)
if form.is_valid():
form.save()
form = BFSForm()
try:
image_url_info = None
num_states_explored = None
final_solution = None
text_file = open("BFSoutputsmaze.txt", "w")
field_name = 'description'
input_value = BFS.objects.latest('id')
field_object = BFS._meta.get_field(field_name)
field_value = field_object.value_from_object(input_value)
field_string_value = str(field_value).split("n")
text_file.writelines(field_string_value)
text_file.close()
m = Maze("BFSoutputsmaze.txt")
print("Maze:")
m.print()
print("Solving...")
m.solve()
print("States Explored:", m.num_explored)
print("Solution:")
m.print()
m.output_image("BFSoutputsmaze.png", show_explored=True)
m.output_image("static/search/bfs/maze.png", show_explored=True)
image_url_info = "/../../../static/search/bfs/maze.png"
num_states_explored = m.num_explored
# final_solution = ''.join(m.end_result)
final_solution = str(''.join(m.end_result))
print(''.join(m.end_result))
get_bfs_image_view(request)
# BFS.objects.latest('id').delete()
except:
print("BFS ERROR: Error in the try session of BFS in view.py")
context = {
'form': form, 'image_url': image_url_info, 'states_explored': num_states_explored,
'solution': final_solution}
return render(request, "BFS/bfs.html", context)
def post_bfs_view(request):
if request.method == "POST" and request.is_ajax():
bfs_view(request)
return JsonResponse({"success":True}, status=200)
return JsonResponse({"success":False}, status=400)
def get_bfs_view(request):
if request.method == "GET" and request.is_ajax():
try:
image_url_info = None
num_states_explored = None
final_solution = None
text_file = open("BFSoutputsmaze.txt", "w")
field_name = 'description'
input_value = BFS.objects.latest('id')
field_object = BFS._meta.get_field(field_name)
field_value = field_object.value_from_object(input_value)
field_string_value = str(field_value).split("n")
text_file.writelines(field_string_value)
text_file.close()
m = Maze("BFSoutputsmaze.txt")
print("Maze:")
m.print()
print("Solving...")
m.solve()
print("States Explored:", m.num_explored)
print("Solution:")
m.print()
m.output_image("static/search/bfs/maze.png", show_explored=True)
image_url_info = "/../../../static/search/bfs/maze.png"
# final_solution = ''.join(m.end_result)
final_solution = str(''.join(m.end_result))
print(''.join(m.end_result))
# bfs_view(request)
# BFS.objects.latest('id').delete()
bfs_view(request)
except:
print("BFS ERROR: Error in the try session of BFS in view.py")
return HttpResponse(final_solution)
def get_bfs_image_view(request):
if request.method == "GET" and request.is_ajax():
try:
image_url_info = "/../../../static/search/bfs/maze.png"
except:
print("BFS ERROR: Error in the try session of BFS in view.py")
return HttpResponse(image_url_info)
我用来更新图像的视图功能：
def get_bfs_image_view(request):
if request.method == "GET" and request.is_ajax():
try:
image_url_info = "/../../../static/search/bfs/maze.png"
except:
print("BFS ERROR: Error in the try session of BFS in view.py")
return HttpResponse(image_url_info)
主bfs.html文件：
<form id = "contactForm" method='POST' >{% csrf_token %}
{{ form.as_p }}
<input type='submit' value='Search' class="submit-btn poppins"/>
</form>
<pre><span id="myText"></span></pre>
<div id="myimage"></div>
我使用的ajax：
<script>
$(document).ready(function(){
$("#contactForm").submit(function(e){
// prevent from normal form behaviour
e.preventDefault();
// serialize the form data
var serializedData = $(this).serialize();
$.ajax({
type : 'POST',
url : "{% url 'BFS:contact_submit' %}",
data : serializedData,
success : function(response){
//reset the form after successful submit
$("#contactForm")[0].reset();
// This will then call for the get request to update the id "myText"
live_update();
live_image_update();
},
error : function(response){
console.log(response)
}
});
});
function live_update(){
$.ajax({
url: "{% url 'BFS:get_user_info' %}",
type: 'get', // This is the default though, you don't actually need to always mention it
success: function(data) {
var number = data;
document.getElementById("myText").innerHTML = number;
$("#myText").hide();
$("#myText").html(data);
$("#myText").fadeIn(1000);
},
error: function() {
alert('Got an error dude');
}
});
}
function live_image_update(){
$.ajax({
url: "{% url 'BFS:get_bfs_image_info' %}",
type: 'get', // This is the default though, you don't actually need to always mention it
success: function(data) {
$('#myimage').html('<img src="/../../../static/search/bfs/maze.png" />');
},
error: function() {
alert('Got an error dude');
}
});
}
});
</script>
我用来更新图像的ajax：
function live_image_update(){
$.ajax({
url: "{% url 'BFS:get_bfs_image_info' %}",
type: 'get', // This is the default though, you don't actually need to always mention it
success: function(data) {
$('#myimage').html('<img src="/../../../static/search/bfs/maze.png" />');
},
error: function() {
alert('Got an error dude');
}
});
}
});
urls.py视图：
app_name = 'BFS'
urlpatterns = [
path('bfs/', bfs_view),
path('ajax/contact', post_bfs_view, name ='contact_submit'),
path('ajax/get_user_info', get_bfs_view, name = 'get_user_info'),
path('ajax/get_bfs_image_info', get_bfs_image_view, name = 'get_bfs_image_info'),
]
models.py文件：
class BFS(models.Model):
description = models.TextField(blank=True, null=True)
def __str__(self):
return self.description
forms.py文件：
from django import forms
from .models import BFS
class BFSForm(forms.ModelForm):
description = forms.CharField(
required=False,
label=False,
widget=forms.Textarea(
attrs={
'id': 'TA1',
'rows': '10vh',
'cols': '8vw',
'placeholder': 'Enter Your Map Here',
'class': 'textfield-style',
'style': 'max-width: 100%; max-height: 100%;outline: none; border: none; background-color: white; width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; font-size: 20px; spellcheck="false";',
}
)
)
class Meta:
model = BFS
fields = [
'description'
]
def __init__(self, *args, **kwargs):
super(BFSForm, self).__init__(*args, **kwargs)
for field in self.fields:
self.fields[field].widget.attrs.update({
'class': 'form-control'})
看起来您每次都将图像URL设置为相同的值，因此由于客户端缓存，您看不到被替换的图像。
解决这个问题的最简单方法是为每个生成的图像使用不同的文件名。另一个简单的方法可能是调整URL，使其成为不同的请求，因此，如果您将live_image_update成功回调更改为附加一个带时间戳的查询字符串，那么您将触发一个新的请求，并看到新的图像。
function live_image_update(){
$.ajax({
url: "{% url 'BFS:get_bfs_image_info' %}",
type: 'get', // This is the default though, you don't actually need to always mention it
success: function(data) {
$('#myimage').html('<img src="/../../../static/search/bfs/maze.png?' +
Date.now() + '/>');
},
error: function() {
alert('Got an error dude');
}
});