在使用动态数据的滑块中实现 jQuery

Posted 2023-05-08

【中文标题】在使用动态数据的滑块中实现 jQuery

【英文标题】：Implement jQuery in a slider that uses dynamic data

【发布时间】：2020-10-21 07:59:08

【问题描述】：

我正在尝试使用 jQuery 和 ajax 将带有动态数据的滑块添加到我的 django 项目中，我收到了制作上一个和下一个按钮的帮助，该按钮可以在配置文件中滑动，但我现在专注于上一个，在这个过程中我意识到代码中有一个 NoReverseMatch 错误，我不知道如何修复它们，因为我是 jQuery 和 ajax 的新手。

views.py

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

    def previous(request):
        id= request.GET.get("id", None)
        if id != 1:
            previous_id= id-1
            prev_user= Mates.objects.filter(user= previous_id)
        data= 
            "username": prev_user.user,
            "req_bio": prev_user.req_bio,
            "req_image": prev_user.req_image,
        
        return JsonResponse(data)

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)

    class Profile(models.Model):
        user = models.OneToOneField(User, on_delete=models.CASCADE)
        profile_pic = models.ImageField(upload_to='profile_pics', null=True, blank=True, default='default.png')
        bio = models.CharField(max_length=400, default=1, null=True)
        connection = models.CharField(max_length = 100, blank=True)
        follower = models.IntegerField(default=0)
        following = models.IntegerField(default=0)

urls.py

    urlpatterns = [
        path('mates', views.mates, name='mates'),
        path('mates-main', views.matesmain, name='mates-main'),
        path('previous', views.previous, name='previous'),
    ]

html

    <div class="mates-grid-1-1-content">
        <div class="mates-grid-2-content">
            <button type="button"  onclick="previous(user.id)" 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 " >
                    </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="button"  onclick="next(user.id)" id="next-button">next</button>
        </div>
    </div>

脚本

    function previous(id)
        $.ajax(
            url: '% url 'previous' %',
            type: "get",
            data: 
                'id': id,
            ,
            dataType: 'json',
            success: function (data) 

            $(".mates-item-content").empty();
            $(".mates-item-content").append("<img class="mate-pic" src=" user.profile.profile_pic.url " >");
            $(".mates-item-content").empty();
            $(".mates-item-content").append("<a href="% url 'profile' username=content.user.username %" style="float: left"> content.user </a>");
            $(".mates-item-content").empty();
            $(".mates-item-content").append("<img class="mates-image" src=" content.req_image.url " >");
            $(".mates-item-content").empty();
            $(".mates-item-content").append("<p> content.req_bio </p>");
            ,
            error: function (data) 
                alert('nope');
            
          );
        ; 
    

【问题讨论】：

这个示例代码有很多地方需要修复/改进。但首先，你的 JS 脚本是在同一个 HTML 文件中，还是在某个分开的 .js 文件中？

@revliscano 它在同一个 html 文件中，我在这里将其分开，以便看起来更有条理

@revliscano 我应该在这里解决什么问题？

【参考方案1】：

您收到NoReverseMatch 异常，因为您没有在$.ajax() 函数内正确使用% url & 标记。由于您在 HTML 本身中拥有该 javascript 代码，因此您可以用以下内容替换您拥有的内容：

url: "% url 'previous' %"

另外，在success 属性的回调函数中，您并没有使用从视图中获取的数据应该如何使用。请注意，您将无法在此回调中使用 Django 模板语言获取该数据，但您需要使用 JavaScript 来访问该数据。例如：

success: function(data)
    console.log(data.req_bio);

那是因为当 HTML 被 Django 渲染时，你可能想要在回调函数中使用的信息（例如： req.bio ）还不会那里。

不过，在处理 AJAX 响应时，有一种方法可以继续使用 Django 模板语言，即使用视图返回的上下文数据。请参阅this answer 了解更多信息。

【讨论】：

所以我应该有 console.log(data.req_bio) 和 console.log(data.req_image) 对吗？ user.username 和 profile_pic 呢？

console.log() 只是为了说明您将如何访问来自模板的数据。至于其他信息，由于它不是直接来自处理 AJAX 请求的视图，您可能希望将其传递给执行调用的 JavaScript 函数，然后在成功属性的函数中使用该数据。

尽管如此，在这种特殊情况下，由于您的 JS 在 HTML 本身中，并且您希望在成功属性的函数中使用 Django 呈现 HTML 时可用的信息，我想您可能使用模板语言（正如你所拥有的那样），它仍然可以工作。但恐怕这不是一个非常干净的方法。