Django和Ajax的那些事儿-Ajax Post

上回的《Django和Ajax的那些事儿-Ajax Get》,讲过$.get(),它是从Django服务端获取我们想要的数据，然后渲染到前端html。今天说到Post方式，葫芦画瓢，让人想:会不会有$.post()。嗯，没错，的确有$.post()，官网示例：

$.post("test.cgi",
       { name: "John", time: "2pm" },
       function(data){
          alert("Data Loaded: " + data);
       } 
);

不妨说说，$.post()和传统form下的post动作是一样的，是把form里的各表单值提交给服务端。但$.post()是在前端触发，把数据提交给服务器端，整个过程都是无刷新的。官网示例就很清楚说明这个过程：
$.post()把{ name: "John", time: "2pm" }这两个数据，提交给test.cgi，让test.cgi在服务端处理后返回data给自己进一步处理（示例把返回的数据alert出来）。

这回通过添加一篇博客，来看看Django下结合JQuery Ajax Post是怎么做的。为了更好说明，下面的例子尽量要简单。博客只有标题和内容，这次的任务就是使用JQuery把页面的输入的标题和内容，提交给Django保存到数据库，整个过程要做到不刷新。

看看前端的js代码：

function post_one_blog()
{
    msg=$("#msg");
    title=$('#id_title').val();
    content=$('#id_content').val();
    msg.html("submit...");
    $.post('{%url ajax_add%}',{'title':title,'content':content}, function(ret) {        
        if(ret=='1'){
            msg.html("提交成功！");
        }
        else if(ret=="2"){
            msg.html("请输入标题和内容！");
        }
        else{
            msg.html("系统错误！");
        }
    });
}

前期工作是，获取页面上三个元素对象：用于提示的span标签，博客标题，正文的输入框。这三个对象到后面，将给$.post()调用。这段代码核心部分是$.post()整个函数，我们给它传了一个服务端的url（保存数据到数据库的页面）和两个Post参数{'title':title,'content':content}，在服务端处理后，会返回“1” “2”..等这些标识（这个任由自己定义，只要明白当中的意义即可），最后$.post()获取到服务端返回的标识，根据它们判断服务端处理的怎么样了，再给出适当的提示。

看看服务端的处理方法：

def ajax_add(request):
    response=HttpResponse()
    response['Content-Type']="text/javascript"
    title=request.POST.get("title",'')
    content=request.POST.get("content",'')
    ret="0"
    if title and content:        
        blog=Article(title=title,content=content,user=request.user)
        blog.save()
        ret="1"
    else:
        ret="2"
    response.write(ret)
    return response

幸好Python拥有简洁的语法，一看就大概知道什么意思来了。因为刚才是想服务端给我们返回简单的字符串如“1”“2”此类的标识即可，所以首先确定返回的内容格式为"text/javascript"，然后再接收js给post过来的数据{'title':title,'content':content}，怎么接收呢？看看代码：title=request.POST.get("title",'')  content=request.POST.get("content",'')，因为js提交数据的行为是Post方式，我们自然使用Djanog提供的request.POST.get(）方法来获取，题外话，如果js是采用Get方式，我们应该能想到使用request.GET.get(）方法。注意大小写。python区分大小写的。
接下来，判断接收到的两个参数都不为空，才构造一个博客对象，保存它，返回“1”；否则返回“2”。这时候整个动作都完成了。

这些做好后，你可能急着测试，并发现了404之类的错误，其实在Django 1.2之后使用Post方式数据提交，都涉及到了安全性的问题，Django默认打上了CSRF中间件，你需要在post页面上加一些代码，让程序正常使用：

$(document).ajaxSend(function(event, xhr, settings) {
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});

好了，就到这里。之前的《Django和Ajax的那些事儿-Ajax Get》有例子，里面包含了所有的代码，可供参考。