Django:提交表单时不会触发Ajax函数

时间:2017-08-22 17:49:10

标签: jquery python ajax django

我尝试制作一个基本的聊天应用程序,该应用程序将显示在没有页面刷新的情况下发送的消息,但出于某种原因,我无法使该javascript运行。

HTML

<form id="chat-form" method="POST" action="/chat/{{ sender.id }}{{ receiver.id }}/post/"> {% csrf_token %}
<div id="chat-bottom" class="input-group">
    <input id="textbox_message" type="text" class="form-control" placeholder="Type your message" name="textbox_message">    
    <span class="input-group-btn">
        <input id="send" class="btn btn-default pull-right" type="submit" value="Send" name="btn_send"/>
    </span>
</div>

AJAX

$('#chat-form').on('submit', function(event){
event.preventDefault();

    $.ajax({
        url : '/chat/{{ sender.id }}{{ receiver.id }}/post/',
        type : 'POST',
        data : { msg : $('#textbox_message').val() },
        dataType : 'json',
        success : function(json){
            $('#textbox_message').val('');//clear the chat message box
            $('#msg-list').append('<li class="text-right list-group-item">' + json.message + '</li>');// append the new message to the list
            var chatlist = document.getElementById('msg-list-div');
            chatlist.scrollTop = chatlist.scrollHeight;//scroll down after the message is send
        }
        error: function(){
            alert("Error while sending the message");
        }
    });
});

views.py

def post_message(request, sender, receiver):

    if request.method == 'POST':
        if ('textbox_message' in request.POST) and request.POST['textbox_message'].strip():
            message = request.POST['textbox_message']

            Inbox.send_message(request.user, User.objects.get(id = receiver), message)

            return JsonResponse({ 'message': message})

    return HttpResponse("Deal with this later")

urls.py

urlpatterns = [
    url(r'^(?P<sender>\d+)(?P<receiver>\d+)/$', views.index),
    url(r'^(?P<sender>\d+)(?P<receiver>\d+)/post/$', views.post_message),
]

问题是:为什么没有触发Ajax(它既没有输入成功也没有输入错误调用)以及如何使其工作?

只是旁注:这是我第一次使用Ajax,我也是Django的新手,但我愿意学习并接受任何额外的建议。

提前致谢。

0 个答案:

没有答案