我正在使用Django构建一个web应用程序。我对javascript/html不太熟悉，因为它不是我的专业领域。
我正在做的是搜索一个将在api中查找的名称，它将返回它和其他信息。
我会发布我认为与我的问题相关的代码。如果你还需要什么，我可以提供。
视图.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
这是表格的外观视图：
在此处输入图像描述
我希望每次发送get请求时都能得到新的响应。
根据你的.css和.js报告找不到404这一事实判断，我认为这是你的静态根的问题。我认为默认情况下，你的设置文件中的STATIC_ROOT将是/STATIC，但你的js显然在/STATIC/web/dist，所以当你加载文件时，你应该将你的STATIC-ROOT更新为/STATIC/web/dist，或者在base.html中指定从/STATIC的路径。
(编辑(而且您的视图正在从另一个网站请求数据，并将收到的所有数据保存为新的模型实例。页面上出现重复项是因为数据库中有重复项，而不是因为javascript。
您的javascript设置为每次点击Search Customer时都会重新加载页面，因此，未能清除表的javascript肯定与您的重复问题无关。
最后，removeTableBody函数位于$((内，这意味着该函数只存在于这些括号的范围内。因此，如果你点击清除表按钮，我相信它会在你的控制台上发布removeTableBody函数不存在的消息。删除$((。