Django Ajax-jQuery

Question

由于我对 Ajax 和 jQuery 比较陌生，并且很难做到这一点，所以我在这里发布。

Views.py

if request.is_ajax():
    if request.method == "POST":
        chatroom_id = request.POST['chatroom_id']
else:
    chatroom_id =''

print chatroom_id

当我删除 if request.is_ajax() 条件时，它会显示错误消息 Key 'chatroom_id' not found in <QueryDict: {u'reply': [u''], u'csrfmiddlewaretoken': [u'yIJct9O7WfyPnWmDosW9N5TEklRwoIHP']}>

Template.html

{% for key, values in chat_data.items %}
    <div class="container-fluid" alt = {{key}}>
        <div class="row-fluid">
           <div class="span2">
             {{values.from}} <br/> {{values.init_query}}
            </div>

        <div class="span10 well">

            {% for k in values.chat %}

                    <label> Text : {{k.text}} </label> 
                    <label> {{k.date_time}} </label>

            {% endfor %}        

        <form action = "#" method = "POST" id = {{key}} class="chatroom">
           {% csrf_token %}
               {{ form.as_p }}

            <input type="submit" value = "Sent" class="btn btn-primary"> 
        </form>

            </div>
        </div>
    </div>
{% endfor %}

由于会有很多聊天和相应的回复提交按钮及其密钥，我希望当我回复特定聊天时，它会随身携带密钥并相应地处理聊天。

如何使用 Django、jQuery 和 Ajax 实现这一目标？要发送的回复应该使用 jquery 通过 Ajax 给出

我已经编写了这些 jQuery 代码行，但它们似乎不起作用。我要去哪里

<script type="text/javascript">

var form = $('#'+'{{key}}');

form.submit(function (event) {
event.preventDefault();

$.ajax({
    type: "POST",
    url: "/dashboard",
    data : form.serialize(),
    success: function( response ) {
      console.log( response );
    }
});
return false;

});

Answer 1

我认为最好的免费资源是 Mike Hibbert's video 关于使用 django 和 jquery 实现 ajax。

Answer 2

对于 jQuery，你有一些错误，帖子应该是这样的：

var form = $('#'+'{{key}}');

form.submit(function (event) {
    event.preventDefault();

    $.ajax({
        type: "POST",
        url: "/dashboard",
        data : form.serialize(),
        success: function( response ) {
          console.log( response );
        }
    });
    return false;
});

试试看，然后告诉我结果如何。

Answer 3

当您使用 jQuery 和 Django 使用 csrf 发出 Ajax 请求时，您需要传递令牌，这使用 Django 文档 https://raw.github.com/carhartl/jquery-cookie/v1.3.1/jquery.cookie.js 中的 jQuery cookie 插件：

/** Django's csrftoken ajax security & server failures */
App.ajax = (function () {

var csrftoken = $.cookie('csrftoken'),
    host = document.location.host,
    protocol = document.location.protocol,
    sr_origin = '//' + host,
    origin = protocol + sr_origin;

return {

    'csrfSafeMethod': function (method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    },

    'sameOrigin': function (url) {
        return (url === origin || url.slice(0, origin.length + 1) === origin + '/') || (url === sr_origin || url.slice(0, sr_origin.length + 1) === sr_origin + '/') || !(/^(\/\/|http:|https:).*/.test(url));
    },

    '$setup': function () {
        var scope = this;
        // TODO:  create server failure pages and alert mechanism
        $.ajaxSetup({
            statusCode: {
                401: function () {

                },
                403: function () {

                }
            },
            beforeSend: function (xhr, settings) {
                if (!(scope.csrfSafeMethod(settings.type) && scope.sameOrigin(settings.url))) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });

        return this;
    }
}());

$(document).ready(function(){
    App.ajax.$setup() 
    var $form = $('form');

    $form.on('submit' function(e){
        e.preventDefault();

         $.ajax({
            type: "POST",
            url: '/dashboard',
            data: $form.serialize(),
            success: function (response) {
                window.alert(response);
            }
        });

    });
});

我个人更喜欢传递 JSON，还有你在什么浏览器上测试？查看这些库：

https://raw.github.com/marioizquierdo/jquery.serializeJSON/1.0.0/jquery.serializeJSON.js

https://raw.github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest/master/jQuery.XDomainRequest.js