Django：更新页面而不重新加载

Posted 2023-02-23

【中文标题】Django：更新页面而不重新加载

【英文标题】：Django: update a page without reloading

【发布时间】：2018-11-15 16:19:15

【问题描述】：

我想用按钮操作更新我的 homepage.html 并显示来自服务器的一些结果。但问题是当我单击按钮时，整个页面正在重新加载。在这里，我的项目名称是“T2KG”。我的表单标签如下所示：

<form method="POST">
        % csrf_token %

        <center><textarea placeholder="Give a input sentence....."
      class="text" name="sent" rows="5" cols="70" font="15px arial, sans-serif" autofocus>Barack Obama born in Hawaii. Hawaii locates in USA.</textarea></center><br>
        <button type="submit" class="btn btn-primary btn-block" id="display_result">Generate Triple</button>
</form>

通过在许多网站上搜索，我了解到我的 view.py 和 urls.py 不正确，而且我必须使用 AJAX。但是我不知道在这种情况下如何实施。我已经尝试过，但找不到任何出路。在 view.py 我返回这样的值：

def result(request):
text = 'null'
if request.method == 'POST':
    form_input = Sentence(request.POST)
    if form_input.is_valid():
        text = form_input.cleaned_data['sent']
    else:
        form_input = Sentence()

triples = getTriples(text)

ent_list = entityList(text)
triples = predicateList(aggregate(triples, ent_list))
return render(request, './T2KG/homepage.html','triples': triples, 'json_triples': json.dumps(triples), 'text':text)

而我的 urls.py 是：

urlpatterns = [
path('', views.set_sent, name='set_text'),
url(r'^T2KG/homepage', views.result, name='result'),]+static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

请帮助我。

【问题讨论】：

你有 API 吗？你需要一个能够使用 Ajax

不，我不使用任何 API。请您建议我应该使用哪个 API？

您可能想要使用this Django 框架。通读文档，设置起来非常容易。要使用 Ajax，您必须开始编写 javascript（或转换为 JavaScript 的东西）。

好的，谢谢您的建议。我会努力实现的。

难道不能只使用带有 JavaScript 的 AJAX 来做这样的事情吗？如果不是，那为什么？

【参考方案1】：

Ajax 用于在不重新加载页面的情况下将 post 数据发送到 views.py，也不会影响您之前返回的数据。

模板

<script>
.
.
$.ajax(
    url : "url where you want to sent data"
    type : "POST", // http method
    data : 
      name:"name",
      csrfmiddlewaretoken: ' csrf_token ' , //This is must for security in Django
    , // data sent with the post request

    // handle a successful response
    success : function(response)
      alert(response["name"]);
    ,

    // handle a non-successful response
    error : function() 
    .....
    
);
.
.
</script>

views.py

​​>

def view_function(request):
    ..........
    if request.method == 'POST':
        name = 'change_name'
        return JsonResponse("name":name)

【参考方案2】：

Ajax 是为了解决这个问题而创建的，在第一次重新加载页面后，所有其他更新和来自服务器的数据都是通过 ajax 获取的，如果你想开发一个动态网页，你需要了解 Ajax

【参考方案3】：

您看到的是一个 ajax 调用来更新页面上的数据，而无需刷新整个页面。 为此，您需要一个 javascript 调用来将表单数据发送到后端并在成功时接收一个 json 对象。

您可以为此编写一个单独的视图，或者通过在 python 端的同一视图中检查方法来处理它（我更喜欢 API 的 sep 视图）。如果使用相同的视图，请记住返回 JSON 对象而不是模板渲染器。

javascript 所做的只是从您的网页中获取表单数据并将其发送到指定的 URL，然后等待响应。要让它应用更改，它需要一个响应（#can read about js promises）。所以需要有一个后端（在这种情况下是python）来监听这个调用并返回适当的数据（成功时）。

一个不错的关注链接可以是：

https://www.geeksforgeeks.org/handling-ajax-request-in-django/

https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html

http://www.tangowithdjango.com/book17/chapters/ajax.html