Django ajax搜索按钮不止一个数据

Question

我有一个django项目。在这个项目中，我用ajax制作了一个搜索框，但相同的数据不止一次出现。ajax有问题吗？还是姜戈的问题？我不确定。请帮帮我。

嘿，伙计们。我有一个django项目。在这个项目中，我用ajax制作了一个搜索框，但相同的数据不止一次出现。ajax有问题吗？还是姜戈的问题？我不确定。请帮帮我。

嘿，伙计们。我有一个django项目。在这个项目中，我用ajax制作了一个搜索框，但相同的数据不止一次出现。ajax有问题吗？还是姜戈的问题？我不确定。请帮帮我。我的html代码

enter code here
<form class="search-content" method="POST">
{% csrf_token %}
<input type="text" name="text" placeholder="Ne Aramıştınız?"  id="searchInputChange">
<button>Ara <i class="fas fa-search"></i></button>
</form>
<div class="all-dietitans-content">
<div id="null-search-dietitians">
Aradığınız sonuç bulunamadı. Lütfen aradığınız kelimeyi gözden geçiriniz.
</div>
{% for posts in posts%}
<div class="dietitans" data-firs-load="true">
<div class="left-image">
<img src="{{posts.photo}}" alt="">
<a onclick="openVideoModal(event)" data-iframe-link="{{posts.video}}">
<i class="far fa-play-circle"></i>
<br>
İzle
</a>
</div>
<div class="right-content">
<div class="dietitans-infos">
<div class="left">
<div class="name">
{{posts.isim}} {{posts.soyisim}}
</div>
<div class="degree">
{{posts.uzmanlik}}
</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star notStar"></i>
</div>
</div>
<div class="right">
<div class="item">
<div class="title">
Yorum Sayısı
</div>
<div class="number">
{{posts.yorum_sayi}}
</div>
</div>
<div class="item">
<div class="title">
Danışan Sayısı
</div>
<div class="number">
{{posts.danisan_sayi}}
</div>
</div>
</div>
</div>
<div class="dietitans-services-content">
<div class="dietitans-description">
<div>Uzmanlıklar :</div>
<div> {{posts.hizmetler}} </div>
</div>
<div class="buttons-and-text">
<div class="buttons">
<div class="button-style-2">
<a href="{% url 'diyetisyen' slug=posts.slug %}">Profili İncele</a>
</div>
<div class="button-style-1">
<a href="{%url 'randevu' slug=posts.slug %}">Randevu Al</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>

我的ajax代码

enter code here
const nullDietitans = document.getElementById('null-search-dietitians')
const pagination = document.querySelector('.pagination')
const dietitiansContent = document.querySelector(".all-dietitans-content")
const dietitansFirstLoad = document.querySelectorAll('.all-dietitans-content > .dietitans[data-firs-load="true"]')
const searchInputChange=document.querySelector("#searchInputChange");
searchInputChange.addEventListener('input',(e)=>{
nullDietitans.style.display = 'none'
let searchValue=e.target.value.trim();

if(searchValue.length>=3){
if(searchValue === ''){
dietitansFirstLoad.forEach(element=>{
element.style.display = 'flex'
})
pagination.style.display = 'flex'
document.querySelectorAll('.all-dietitans-content > .dietitans[data-search="true"]').forEach(element=>{
element.remove()
})
nullDietitans.style.display = 'none'
}
else{
fetch("/getDietitians",{
body: JSON.stringify({searchText:searchValue}),
method: "POST",
})
.then((res)=>res.json())
.then((data)=>{
console.log(data)
dietitansFirstLoad.forEach(element=>{
element.style.display = 'none'
})
pagination.style.display = 'none'
if(data.length > 0){
$.each(data,(index,value)=>{
$.each(data,(index1,value1)=>{

$(".all-dietitans-content").append('' +
'<div class="dietitans" data-search="true"><div class="left-image">' +
'<img src="'+value1.photo+'" alt="">' +
'<a onclick="openVideoModal(event)" data-iframe-link="'+value1.video+'">' +
'<i class="far fa-play-circle"></i><br>İzle</a></div><div class="right-content"><div class="dietitans-infos"><div class="left"><div class="name">' +
value1.isim + ' ' + value1.soyisim +
'</div><div class="degree">' +
value1.uzmanlik +
'</div><div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div></div><div class="right"><div class="item"><div class="title">Yorum Sayısı</div><div class="number">' +
value1.yorum_sayi +
'</div></div><div class="item"><div class="title">Danışan Sayısı</div><div class="number">' +
value1.danisan_sayi +
'</div></div></div></div><div class="dietitans-services-content"><div class="dietitans-description"><div>Uzmanlıklar :</div><div>' +
value1.hizmetler +
'</div></div><div class="buttons-and-text"><div class="buttons"><div class="button-style-2">' +
'<a href="/diyetisyen/'+value1.slug+'">Profili İncele</a>' +
'</div><div class="button-style-1">' +
'<a href="/randevu/'+value1.slug+'">Randevu Al</a>' +
'</div></div></div></div></div></div>')
})
})
}
else{
nullDietitans.style.display = 'block'
document.querySelectorAll('.all-dietitans-content > .dietitans[data-search="true"]').forEach(element=>{
element.remove()
})
}
});
}
}
else{
dietitansFirstLoad.forEach(element=>{
element.style.display = 'flex'
})
pagination.style.display = 'flex'
document.querySelectorAll('.all-dietitans-content > .dietitans[data-search="true"]').forEach(element=>{
element.remove()
})
nullDietitans.style.display = 'none'
}
})

Answer 1

这是因为您要执行多个查询并使用|来组合它们，这就是它返回重复项的原因
使用Q objects而不是执行list = query1 | query2

@csrf_exempt
def getDietitians(request):
from django.http import JsonResponse
if request.method == "POST": 
search_str=json.loads(request.body).get('searchText')
from django.db.models import Q
expenses = diyetisyenler.objects.filter(
Q(isim__istartswith=search_str) | 
Q(soyisim__istartswith=search_str) | 
Q(uzmanlik__icontains=search_str) | 
Q(hizmetler__icontains=search_str)
)
data=expenses.values()
return JsonResponse(list(data),safe=False)

---

编辑

答案：JS问题，每次搜索都应删除项目列表

---

我也使用过类似的应用程序，所以我会放弃我所做的一些想法：(

延迟

添加延迟可能是个好主意，这样就不会为每一次击键都发布。

示例：搜索abc

1. 搜索a
2. 搜索ab
3. 搜索abc

如果有延迟，我会在400毫秒时得到它，很可能我只会搜索一次abc——除非这个人键入超慢

查看

// global unfortunately :(
var interval = 0;
var counter = 0;
$('#inputfield').on('input', function(e) {
if (!$(this).is(':focus')){ return; }
var search = $(this).val().trim();
if (search){
clearInterval(interval);
interval = setInterval(function() {
counter++;
if (counter >= 4){ // 4 * 100 => 400 millisecond delay
clearInterval(interval);
counter = 0;
searchfunction(this);
};
}, 100);
}else{
// Could clear results here
};
};

乒乓时间戳

较大的查询有时会覆盖较小的

示例：

1. 发送搜索a(query1([耗时15秒]
2. 发送搜索absolutely(query2([耗时2秒]
3. query2返回
4. query1返回，覆盖query2(不好(

溶液

1. 在Javascript POST上，在搜索的同时发送'time': Date.now(),
2. 在python中返回time及其结果
   • {'list':list(data), 'time':request.POST.get('time')}
3. 在Javascript POST返回时，检查返回是否比呈现的更新
   • 如果更新：更新结果&时间到了(时间可以用来存储您发送搜索结果的时间(
   • 如果较旧：则跳过渲染