Question

我正在通过此URL /inbox/<str:username> 从django响应中获取json响应，以获取与该用户的对话中所有消息的json响应。问题始于收件箱页面，该页面将线程和聊天框保存在与instagram相同的页面上，例如instagram，

，但是可以看出，我希望该网址与用户名一样。假设当我单击带有虚拟对象的线程时，我希望url像“收件箱/虚拟”，但在此我的URL是“ / inbox”，这将不允许我启动消息传递的套接字，而呈现此收件箱的views.py模板是

收件箱视图

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)
        });
                
          })
        
        })
                         
                
          })
        
        })

Answer 1

您的Django视图正在重新加载页面，因为它返回的是内容类型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。

更改URL和内容而无需刷新Django

收件箱视图

收件箱中的javascript

查看json响应

AJAX实施失败

1 个答案: