Django：如何在不重新加载的情况下在页面上显示更新的信息

Posted 2023-05-08

【中文标题】Django：如何在不重新加载的情况下在页面上显示更新的信息

【英文标题】：Django: How to show the updated information on the page without reloading

【发布时间】：2021-09-13 11:04:48

【问题描述】：

我在 Djnago 工作，我想在不重新加载页面的情况下更新信息。起初，我使用 Ajax 作为 post 方法，这样页面在提交表单后不应该重新加载，并且可以正常工作。然后我使用 Ajax 的 get 方法，它也可以工作，但是要在页面上看到新信息，我必须刷新页面。

view.py 文件：

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("BFS\outputs\maze.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("BFS\outputs\maze.txt")
        print("Maze:")
        m.print()
        print("Solving...")
        m.solve()
        print("States Explored:", m.num_explored)
        print("Solution:")
        m.print()

        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))

        # 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("BFS\outputs\maze.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("BFS\outputs\maze.txt")
            m.print()
            m.solve()
            print("States Explored:", m.num_explored)
            print("Solution:")
            
            # 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)

bfs.html 主文件：

 <form id = "contactForm" method='POST' >% csrf_token %
    form.as_p 
   <input type='submit' value='Search' class="submit-btn poppins"/>
</form>

<div onload="myFunction()">
   <h1>"The value is: " <pre><span id="myText"></span></pre></h1>
</div>

post 操作的 Ajax：

<script type="text/javascript">
$(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(); 
            ,
            error : function(response)
                console.log(response)
            
        );
   );
);
</script>

get 的 Ajax 操作：

<script>
    $.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;
    ,
    failure: function(data)  
        alert('Got an error dude');
    
); 
</script>

urls.py 文件：

app_name = 'BFS'

urlpatterns = [
    path('bfs/', bfs_view),
    # path('ajax/get_user_info', get_bfs_view, name='get_user_info'),
    path('ajax/contact', post_bfs_view, name ='contact_submit'),
    path('ajax/get_user_info', get_bfs_view, name = 'get_user_info'),
]

models.py 文件：

from django.db import models
from django.urls import reverse
# Create your models here.

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')

【问题讨论】：

嘿兄弟。我试图正确理解。您是否使用get 方法正确获取更新但必须重新加载页面才能看到更新的信息？

是的，你是对的。

很高兴我能帮上忙。 :-)

【参考方案1】：

我建议您将用于获取更新的内容包装在一个函数中，然后在提交表单后点击success 方法后执行函数调用...

以您的js 为例：

$(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();
             ,

             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;
            ,

            error: function() 
                alert('Got an error dude');
            
       );
    
 );

另外，对于live_update函数中的成功方法...你也可以使用，

success: function(data) 
    $("#myText").hide();
    $("#myText").html(data);
    $("#myText").fadeIn(1000);
,

当它更新时，这应该会给它一个很好的淡入淡出效果。 :)

【参考方案2】：

这可能是向您的管道引入前端框架的时候了，因为它可以让您在 DOM 状态更改时更轻松地刷新页面。几年前，在我引入 React Js 之前，我曾尝试单独使用 Django 实现类似的功能。

以下内容可以帮助您，而无需完全学习其他软件：

Update DOM without reloading the page in Django

但是，您会注意到那里的标记答案仍然使用 Javascript，即 jQuery。所以不可否认，你需要实现 javascript 来实现你想要的。

这就是我提到 React Js 的原因。

祝你好运！

【讨论】：

您确实有必要为这些事件学习 React Js。但有时没有必要做所有这些。所需要的只是对 jQuery 有一点了解，以及良好的逻辑思维过程，仅此而已。 :-)