个人中心
gpt4 book ai didi

javascript - 在不刷新 django 的情况下更改 URL 和内容

转载 作者：行者123 更新时间：2023-12-04 08:50:42 28 4
gpt4 key购买 nike

我正在通过这个 url /inbox/<str:username> 从我的 django 响应中获取一个 json 响应获取与该用户对话中所有消息的 json 响应。
问题始于收件箱页面，该页面将线程和聊天框保存在同一页面上，就像 Instagram 看起来像这样 Chat Inbox
但可以看出，我希望 url 与用户名相同。假设当我点击带有虚拟的线程时，我希望 url 像“收件箱/虚拟”，但在这个我的 url 是“/收件箱”，它不会让我启动用于消息传递的套接字，我的 views.py 呈现此收件箱模板是
收件箱 View 

thread_objs= Thread.objects.by_user(user=request.user)
    l=len(thread_objs)
    chat_objs=[]
    for i in range(l):
        chat_objs.append(list(thread_objs[i].chatmessage_set.all()).pop())

    
    chat_objs_serialized=[]
    for i in range(l):
        chat_objs_serialized.append(json.dumps(ChatMessageSerializer(chat_objs[i]).data))
    for i in range(l):
        print(chat_objs_serialized[i])
    
    thread_objs_list=[]
    
    for i in range(l):
        thread_objs_list.append(json.dumps(ThreadSerializer(thread_objs[i]).data))
    
    return render(request,'uno_startup/inbox.html',context={"Threads":thread_objs_list,"Messages":chat_objs_serialized})
现在，当我单击一个线程时，它的内容应该加载在屏幕的右侧，就像这张图片中的这个页面的 inbox.html javascript 一样。
收件箱的javascript 
<body>
<div class='container'>
    <div class='row'>
        <div class="col-md-4" id ="Threadholder">
            <ul id ="Threadbox">
            {% for object in threads %}
                <li><a href=" ">{% if user != object.first %}{{ object.first }}{% else %}{{ object.second }}{% endif %}</a></li>
            {% endfor %}
            </ul>

        </div>    
    
        <div class="col-md-8" id="Chatholder" >
            <ul id="Chatbox">

            </ul>
     
            
         <form id="form" method="POST">
                 <input type="hidden" value="{{ user.username }}" id="myusername">
                 <input type="text" id="chat_message">
                 <input type="submit" class="btn btn-primary">
         </form>
            
        </div>
    </div>
</div>
<script>
    var threads={{ Threads|safe }};
    var messages={{ Messages|safe }};
    const l=threads.length
    const threadholder=$("#Threadbox")
    for(i=0;i<l;i++){
        var data=JSON.parse(threads[i])
        var Message=JSON.parse(messages[i])
        var username =data.second.username
        if (username=="{{ user.username }}"){
            username=data.first.username
        }
        
        var thread=document.createElement("li")
        var main=document.createElement("a")
        
        var div=document.createElement("div")
        var username_holder=document.createElement("p")
        div.className="thread"
        
        var p=document.createElement("p")
        
        p.innerText=Message.message
        
        username_holder.innerText=username
        div.appendChild(username_holder)
        div.appendChild(p)
        main.appendChild(div)
        thread.appendChild(main)
        threadholder.append(thread)
        
    };
function add_message(message){
            
            message=JSON.parse(message)
            const chatholder=$("#Chatbox")
            
            console.log(message.user.username)
            const chat_message= document.createElement("li")
            var div= document.createElement("div")
            var p = document.createElement("p")
            var sender=message.user.username
            var text=message.message
            p.innerText=text
            div.appendChild(p)
            chat_message.appendChild(div)
            if(sender=="{{ user.username }}"){
                chat_message.className="user"
            }
            else{
                chat_message.className="other"
            }
            chatholder.prepend(chat_message)
            
        }
        $(document).ready(function(){
        $("li").click(function(){
            $("#Chatbox").empty()
        
            
            var other_user= this.children[0].children[0].children[0].innerText

            fetch(`/inbox/${other_user}`).then(response => response.json())
                .then(data => data.messages.reverse().forEach(add_message)) 
                
                
          })
        
        })
这是返回json响应的函数
查看 json 响应 
thread=Thread.objects.get_or_new(user=request.user,other_username=username)
    messages=thread[0].chatmessage_set.all()
    l= len(messages)

    messages_serialized=[]
    for i in range(l):
        messages_serialized.append(json.dumps(ChatMessageSerializer(messages[i]).data))
    print(messages)
    return JsonResponse({"messages":messages_serialized})
这个聊天功能是通过这个网址调用的 /inbox/<str:username>我想要一种方法可以帮助我在不重新加载的情况下打开线程并更新 url，我使用了 AJAX，但它没有帮助，因为它也给了我从 django 给我 Json 响应的页面，改变了原始页面。
失败的 AJAX 实现 
<script>
    var threads={{ Threads|safe }};
    var messages={{ Messages|safe }};
    const l=threads.length
    const threadholder=$("#Threadbox")
    for(i=0;i<l;i++){
        var data=JSON.parse(threads[i])
        var Message=JSON.parse(messages[i])
        var username =data.second.username
        if (username=="{{ user.username }}"){
            username=data.first.username
        }
        
        var thread=document.createElement("li")
        var main=document.createElement("a")
        
        var div=document.createElement("div")
        var username_holder=document.createElement("p")
        div.className="thread"
        
        var p=document.createElement("p")
        
        p.innerText=Message.message
        
        username_holder.innerText=username
        div.appendChild(username_holder)
        div.appendChild(p)
        main.appendChild(div)
        thread.appendChild(main)
        threadholder.append(thread)
        
    };
function add_message(message){
            
            message=JSON.parse(message)
            const chatholder=$("#Chatbox")
            
            console.log(message.user.username)
            const chat_message= document.createElement("li")
            var div= document.createElement("div")
            var p = document.createElement("p")
            var sender=message.user.username
            var text=message.message
            p.innerText=text
            div.appendChild(p)
            chat_message.appendChild(div)
            if(sender=="{{ user.username }}"){
                chat_message.className="user"
            }
            else{
                chat_message.className="other"
            }
            chatholder.prepend(chat_message)
            
        }
        $(document).ready(function(){
        $("li").click(function(){
            $("#Chatbox").empty()
        
            
            var other_user= this.children[0].children[0].children[0].innerText
            <script>
    var threads={{ Threads|safe }};
    var messages={{ Messages|safe }};
    const l=threads.length
    const threadholder=$("#Threadbox")
    for(i=0;i<l;i++){
        var data=JSON.parse(threads[i])
        var Message=JSON.parse(messages[i])
        var username =data.second.username
        if (username=="{{ user.username }}"){
            username=data.first.username
        }
        
        var thread=document.createElement("li")
        var main=document.createElement("a")
        
        var div=document.createElement("div")
        var username_holder=document.createElement("p")
        div.className="thread"
        
        var p=document.createElement("p")
        
        p.innerText=Message.message
        
        username_holder.innerText=username
        div.appendChild(username_holder)
        div.appendChild(p)
        main.appendChild(div)
        thread.appendChild(main)
        threadholder.append(thread)
        
    };
function add_message(message){
            
            message=JSON.parse(message)
            const chatholder=$("#Chatbox")
            
            console.log(message.user.username)
            const chat_message= document.createElement("li")
            var div= document.createElement("div")
            var p = document.createElement("p")
            var sender=message.user.username
            var text=message.message
            p.innerText=text
            div.appendChild(p)
            chat_message.appendChild(div)
            if(sender=="{{ user.username }}"){
                chat_message.className="user"
            }
            else{
                chat_message.className="other"
            }
            chatholder.prepend(chat_message)
            
        }
        $(document).ready(function(){
        $("li").click(function(){
            $("#Chatbox").empty()
        
            
            var other_user= this.children[0].children[0].children[0].innerText

           $.ajax({
            type: "GET",
            url: {% url 'Chat' username=other_user %}, 
            data: {'Messages': messages}
        })
        .done(function(response) {
            console.log(reposne)
        });
                
          })
        
        })
                         
                
          })
        
        })

最佳答案

您的 Django View 正在重新加载页面，因为它返回内容类型为 HTML 而不是 JSON 的响应。
代替

return render(request,'uno_startup/inbox.html',context={"Threads":thread_objs_list,"Messages":chat_objs_serialized})
做类似的事情 
from django.http import JsonResponse
...
return JsonResponse({"Threads": thread_objs_list, "Messages": chat_objs_serialized})
您仍然应该使用 JavaScript/AJAX 从前端获取此响应。
至于如何在不引起页面刷新的情况下更改URL，引用 this answer .

关于javascript - 在不刷新 django 的情况下更改 URL 和内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64112703/

28 4 0
文章推荐： reactjs - Material-ui Card 组件的阴影和底部在 GridList 中被剪裁
文章推荐： auth0 - 在两个企业之间集成单一登录
文章推荐： pcap - 为什么 pcap_setfilter 没有生效
文章推荐： javascript - 从 Node js中的html模板创建PDF
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com