使用动态数据的滑块

Question

我正在尝试在 django 上使用动态数据的滑块，该滑块应该像在 tinder 中一样滑动抛出用户。滑块有 2 个按钮，一个将用户重定向到以前看到的配置文件，另一个将用户重定向到下一个配置文件，我还需要加载页面而不重新加载它。我对 javascript 很陌生，所以我真的不知道 js 代码最终会如何，我怎样才能使它工作？请这个很重要

html

    <div class="mates-grid-1-1-content">
        <div class="mates-grid-2-content">
            <button type="submit" id="prev-button">prev</button>
        </div>
        <div class="mates-grid-1-content">
            <div class="mates-item-content">
                <img class="mate-pic" src="{{ user.profile.profile_pic.url }}" >
            </div>
            <div class="mates-item-content">
                <a href="{% url 'profile' username=content.user.username %}" style="float: left">{{ content.user }}</a>
            </div>
            <div class="mates-item-content">
                <div class="responses">
                    <div class="response-item-img">
                        <img class="mates-image" src="{{ content.req_image.url }}" width="400px">
                    </div>
                    <div class="response-item-bio">
                        <p>{{ content.req_bio }}</p>
                    </div>
                    <div class="response-item-button">
                        <button type="submit">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="mates-grid-3-content">
            <button type="submit" id="next-button">next</button>
        </div>
    </div>

models.py

    class Mates(models.Model):
        user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='usermates')
        users_requests = models.ManyToManyField(User, related_name="users_requests")
        req_bio = models.CharField(max_length=400)
        req_image = models.ImageField(upload_to='requestmates_pics', null=True, blank=True, default=False)

views.py

    def matesmain(request):
        contents = Mates.objects.all()
        context = {
            'contents': contents,
            'form_mates': MatesForm(),
        }
        print("nice")
        return render(request, 'mates.html', context)

css

    .mates-grid-1-1-content {
        display: grid;
        text-align: center;
        justify-content: center;
        align-self: center;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 15% 70% 15%;
        grid-auto-rows: 1fr;
        height: 100%;
        grid-auto-flow: column;
    }
    .mates-grid-2-content {
        grid-column:1;
        justify-content: center;
        align-self: center;
    }
    .mates-grid-3-content {
        grid-column:3;
        justify-content: center;
        align-self: center;
    }
    .mates-grid-1-content {
        display: grid;
        text-align: center;
        justify-content: center;
        align-self: center;
        grid-column: 2;
        grid-template-columns: 70px 28% 28%;
        grid-template-rows: .1fr 5fr;
        height: 95%;
        grid-auto-flow: row;

    }

Answer 1

首先你必须将 jquery 添加到你的项目中，只需 google 即可，非常简单，获取最新版本。

我假设您想按用户的 id 对用户进行排序，比如当前用户的 id 是 5，而下一个用户的 id 是 6，依此类推。

您的按钮应如下所示：

 <button type="button" onclick="previous({{user.id}})"   id="prev-button">prev</button>
 <button type="button"  onclick="next({{user.id}})" id="next-button">next</button>

因此该按钮将触发 ajax 函数并将当前用户 ID 传递给它们，以便您可以在视图端使用它。我只写一篇让你明白。

function previous(id){
    $.ajax({
            url: 'here you write the url to the view function',
            type: "get",
            data: {
                'id': id,
            },
            dataType: 'json',
            success: function (data) {
                   "first clean the elements to which you want to append new element as an example:"
           $(".mates-item-content").empty();
           $(".mates-item-content").append("<img class="mate-pic" src="new one you got from database" >")
            },
            error: function (data) {
                alert('nope');
            }
        });
    };
}

上面你看到了 jquery 的 ajax 结构，它基本上将信息发送到你想要的 url（在我们的例子中是用户 ID）并触发函数，然后它从它接收信息。然后在成功部分告诉函数接收到的数据要做什么。

假设您为 ajax 函数创建了一个新应用并将其命名为 ajax。在您的 ajax 视图中，您应该编写一个新函数来从 html 端接收数据。让我们再次称它为previous：

from django.http import JsonResponse
def previous(request):
    id= request.GET.get("id", None)
    if id != 1:
       previous_id= id-1
    prev_user= Mates.objects.filter(user= previous_id)
    "now we got the Mates model related to the previous user so you can send all the infos of it back to html"
   
   data={ 
      username= prev_user.user
      req_bio= prev_user.req_bio
      etc.
   }
     return JsonResponse(data)

这对你来说可能看起来有点复杂，但相信我只要稍微研究一下 jquery 和 ajax，你就会明白它。请记住，这只是您必须做什么的原始指南，会有很多问题需要您解决，例如如果用户 id 为 1 时该怎么办等。玩得开心！