JAVASCRIPT: After sending Item to Database (POST) the window.location.reload() does not work. How to refresh the Data in HTML-Template?

huangapple
go评论97阅读模式
英文:

JAVASCRIPT: After sending Item to Database (POST) the window.location.reload() does not work. How to refresh the Data in HTML-Template?

问题

我在YouTube上录制了一个教程。 Django，Python，HTML和JavaScript。一切都正常，除了window.location.reload()函数。

我尝试了一些解决方法，包括：

  • windows.reload(true)，
  • window.href = window.href，
  • location = self.location，
    以及其他一些方法。

我有一种直觉，即刷新操作在刷新之前或在刷新期间执行。但我不确定。

目标是将输入的数据发送到数据库，然后刷新页面。

这是教程中的代码：

index.html（缩短版）

  1. <body>
  2.     <header>
  3.         <h1>购物清单</h1>
  4.         <div id="input-field">
  5.             <label for="item-input">你想买什么？</label>
  6.             <input type="text" name="item" id="item-input">
  7.         </div>
  8.         <button id="btn" onclick="addItem()">+</button>
  9.     </header>
  10.     <div id="item-table">
  11.         {%  for row in all_items %}
  12.         <div class="list-item">
  13.             <input type="checkbox"> {{row.name}}
  14.         </div>
  15.         {% endfor %}
  16.     </div>
  18.     <script>
  19.         function addItem(){
  20.             let itemName = document.getElementById("item-input").value;
  21.             let formData = new FormData();
  22.             let token = '{{csrf_token}}';
  23.             formData.append('itemName', itemName);
  24.             formData.append('csrfmiddlewaretoken', token);
  25.             fetch('/mylist/', {
  26.                 method: 'POST',
  27.                 body: formData
  28.             });
  29.             window.location.reload();
  30.         };
  31.     </script>
  32. </body>
  33. </html>

views.py

  1. from django.shortcuts import render
  2. from .models import ShoppingItem
  4. # Create your views here.
  5. def mylist(request):
  6.     if request.method == 'POST':
  7.         print('Received date: ', request.POST['itemName'])
  8.         ShoppingItem.objects.create(name=request.POST['itemName'])
  9.     all_items = ShoppingItem.objects.filter(done=0)
  10.     return render(request, 'index.html', {'all_items': all_items})

models.py

  1. from django.db import models
  2. from datetime import date
  4. # Create your models here.
  5. class ShoppingItem(models.Model):
  6.     createDate = models.DateField(default=date.today)
  7.     name = models.CharField(max_length=200)
  8.     done = models.BooleanField(default=False)
  10.     def __str__(self):
  11.         return '(' + str(self.id) + ') ' + self.name
英文:

I recode a Tutorial on Youtube.
Django, Python, HTML an Javascript.
Everthing works fine exept the window.location.reload() function.

I try some workarounds with

  • windows.reload(true),

  • window.href = window.href

  • location = self.location

and some more.

I have a hunch that the reload is executed before or during the code before the reload. But I do not know.

The goal is to send the data from the input to the database and only then refresh the page.

This ist the Code from the tutorial:

index.html (shortened)

  1. &lt;body&gt;
  2.     &lt;header&gt;
  3.         &lt;h1&gt;Shoppinglist&lt;/h1&gt;
  4.         &lt;div id=&quot;input-field&quot;&gt;
  5.             &lt;label for=&quot;item-input&quot;&gt;Was m&#246;chtest du einkaufen?&lt;/label&gt;
  6.             &lt;input type=&quot;text&quot; name=&quot;item&quot; id=&quot;item-input&quot;&gt;
  7.         &lt;/div&gt;
  8.         &lt;button id=&quot;btn&quot; onclick=&quot;addItem()&quot;&gt;+&lt;/button&gt;
  9.     &lt;/header&gt;
  10.     &lt;div id=&quot;item-table&quot;&gt;
  11.         {%  for row in all_items %}
  12.         &lt;div class=&quot;list-item&quot;&gt;
  13.             &lt;input type=&quot;checkbox&quot;&gt; {{row.name}}
  14.         &lt;/div&gt;
  15.         {% endfor %}
  16.     &lt;/div&gt;
  18.    
  19.     &lt;script&gt;
  21.         function addItem(){
  22.             let itemName = document.getElementById(&quot;item-input&quot;).value;
  23.             let formData = new FormData();
  24.             let token = &#39;{{csrf_token}}&#39;;
  25.             formData.append(&#39;itemName&#39;, itemName);
  26.             formData.append(&#39;csrfmiddlewaretoken&#39;, token);
  27.             fetch(&#39;/mylist/&#39;, {
  28.                 method: &#39;POST&#39;,
  29.                 body: formData
  30.             });
  31.             window.location.reload();
  32.         };
  34.     &lt;/script&gt;
  35. &lt;/body&gt;
  36. &lt;/html&gt;

views.py

  1. from django.shortcuts import render
  2. from .models import ShoppingItem
  4. # Create your views here.
  5. def mylist(request):
  6.     if request.method == &#39;POST&#39;:
  7.         print(&#39;Received date: &#39;, request.POST[&#39;itemName&#39;])
  8.         ShoppingItem.objects.create(name = request.POST[&#39;itemName&#39;])
  9.     all_items = ShoppingItem.objects.filter(done = 0)
  10.     return render(request, &#39;index.html&#39;, {&#39;all_items&#39;:all_items})

models.py

  1. from django.db import models
  2. from datetime import date
  4. #Create your models here.
  5. class ShoppingItem(models.Model):
  6.     creatDate = models.DateField (default=date.today)
  7.     name = models.CharField (max_length =200)
  8.     done = models.BooleanField(default=False)
  10.     def __str__(self):
  11.         return &#39;(&#39; + str(self.id) +&#39;) &#39; +self.name

答案1

得分: 0

尝试这样做：

  1. async function addItem() {
  2.   let itemName = document.getElementById("item-input").value;
  3.   let formData = new FormData();
  4.   let token = "{{csrf_token}}";
  5.   formData.append("itemName", itemName);
  6.   formData.append("csrfmiddlewaretoken", token);
  7.   await fetch("/mylist/", {
  8.     method: "POST",
  9.     body: formData,
  10.   });
  11.   window.location.reload();
  12. }
英文:

Try this:

  1. async function addItem() {
  2.   let itemName = document.getElementById(&quot;item-input&quot;).value;
  3.   let formData = new FormData();
  4.   let token = &quot;{{csrf_token}}&quot;;
  5.   formData.append(&quot;itemName&quot;, itemName);
  6.   formData.append(&quot;csrfmiddlewaretoken&quot;, token);
  7.   await fetch(&quot;/mylist/&quot;, {
  8.     method: &quot;POST&quot;,
  9.     body: formData,
  10.   });
  11.   window.location.reload();
  12. }

huangapple
  • 本文由 发表于 2023年2月18日 02:14:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/75487922.html
  • django
  • javascript
  • window.location
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定