在发送新的 GET 请求之前删除请求记录 Django

Question

我正在使用 Django 构建一个网络应用程序。我对 javascript/html 不是很熟悉，因为它不是我的专业领域。

我正在做的是搜索将在 api 中查找的名称，它将与其他信息一起返回。

我将发布我认为与我的问题相关的代码。如果你还需要什么，我可以提供。

views.py

from django.shortcuts import  render
from .models import customer
import requests

def get_customer(request):
    all_customers = {}
    if 'name' in request.GET:
        name = request.GET['name']
        url = 'https://retoolapi.dev/aSIZJV/customer__data?FirstName=%s'%name

        response = requests.get(url)
        data = response.json()
        customers = data

        for i in customers:
            customer_data = customer(
                uid = i['id'],
                f_name = i['FirstName'],
                m_name = i['MiddleName'],
                l_name = i['LastName'],
                phone = i['Phone'],
                email = i['Email'],
                DOB=i['DateOfBirth'],
                EID=i['EmiratesID']

            )
            customer_data.save()
            all_customers = customer.objects.all().order_by('-id')

    return render (request, 'customer.html', { "all_customers": all_customers} )

customer.html

{% extends 'base.html'%}
{% load static %}
{% block content %}

  <div class = "container">
    <div class = "text-center container">
      <br>
      <h2 class = "text-center">Search for the desired customer</h2>
      <br>
      <form method="GET">
        <input type='button' value='Remove Table Body' onclick='removeTableBody()'/>
          
<!--          I am trying to remove the table body using the line above, but it is not working-->
          
          
        <input type = "text" name = "name" placeholder="Search..." class = "text-center"> 
        <button type = "submit" class = "btn-danger btn-sm">SEARCH CUSTOMER</button>
      </form>

    </div>
    <br><br>


    <div class="container">
    <h1>Customer Table</h1>

    <div id="toolbar">
            <select class="form-control">
                    <option value="">Export Basic</option>
                    <option value="all">Export All</option>
                    <option value="selected">Export Selected</option>
            </select>
    </div>

    <table id="table"
                 data-toggle="table"
                 data-search="true"
                 data-filter-control="true"
                 data-show-export="true"
                 data-click-to-select="true"
                 data-toolbar="#toolbar">
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="ID">ID</th>
                <th data-field="FirstName" data-filter-control="input" data-sortable="true">First Name</th>
                <th data-field="MiddleName" data-filter-control="input" data-sortable="true">Middle Name</th>
                <th data-field="LastName" data-filter-control="input" data-sortable="true">Last Name</th>
                <th data-field="Phone" data-filter-control="select" data-sortable="true">Phone</th>
                <th data-field="Email" data-filter-control="select" data-sortable="true">Email</th>
                <th data-field="DateOfBirth" data-filter-control="select" data-sortable="true">Date Of Birth</th>
                <th data-field="EmiratesID" data-filter-control="select" data-sortable="true">EmiratesID</th>
            </tr>
        </thead>
        <tbody>
            {% for customer in all_customers %}
                <tr>
                    <td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
                    <td>{{customer.uid}}</td>
                    <td>{{customer.f_name}}</td>
                    <td>{{customer.m_name}}</td>
                    <td>{{customer.l_name}}</td>
                    <td>{{customer.phone}}</td>
                    <td>{{customer.email}}</td>
                    <td>{{customer.DOB}}</td>
                    <td>{{customer.EID}}</td>
                </tr>
            {% endfor %}

        </tbody>
    </table>
    </div>
  </div>
{% endblock %}
<!-- partial -->

static/website/dist/script.js

var $table = $('#table');
    $(function () {
        $('#toolbar').find('select').change(function () {
            $table.bootstrapTable('refreshOptions', {
                exportDataType: $(this).val()
            });
        });
    })

        var trBoldBlue = $("table");

    $(trBoldBlue).on("click", "tr", function (){
            $(this).toggleClass("bold-blue");
    });


var $table_empty = $('#table');
    $(function removeTableBody() {
        $('#table tbody').empty();
    })
// I wrote the line above to empty the table

当我按下按钮清空表格中的行时，我在终端上看到了这个：

[15/Dec/2021 15:34:05] "GET /style.css HTTP/1.1" 404 2283
[15/Dec/2021 15:34:05] "GET /script.js HTTP/1.1" 404 2283

这是表格外观的视图：

enter image description here

我希望每次发送 GET 请求时都能得到新的响应。

Answer 1

根据您的 .css 和 .js 报告 404 not found 的事实判断，我将假设这是您的静态根目录的问题。我认为默认情况下，您的设置文件中的 STATIC_ROOT 将为 /static，但您的 js 显然位于 /static/web/dist，因此您应该将 STATIC_ROOT 更新为 /static/web/dist 或指定 /static 中的路径加载文件时的 base.html。

（编辑） 还。您的视图正在从另一个网站请求数据并将接收到的所有数据保存为新模型实例。您的页面上出现重复项是因为您的数据库中有重复项，而不是因为 javascript。

您的 javascript 设置为在您每次点击 Search Customer 时重新加载页面，因此，无法清除表格的 javascript 绝对与您的重复问题无关。

最后，您的 removeTableBody 函数位于 $( ) 内，这意味着该函数仅存在于这些括号的范围内。因此，如果您单击清除表格按钮，我相信它会向您的控制台发布 removeTableBody 函数不存在的信息。删除 $( )。