django中的ajax实现(POST)--转载备份

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

    $.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代码:
view plainprint?

    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()获取到服务端返回的标识,根据它们判断服务端处理的怎么样了,再给出适当的提示。

看看服务端的处理方法:
view plainprint?

    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 2之后使用Post方式数据提交,都涉及到了安全性的问题,Django默认打上了CSRF中间件,你需要在post页面上加一些代码,让程序正常使用:
view plainprint?

    $('html').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;  
       }  
       if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {  
           // Only send the token to relative URLs i.e. locally.  
           xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));  
       }  
   });  

好了,就到这里。之前的《Django和Ajax的那些事儿-Ajax Get》有例子,里面包含了所有的代码,可供参考。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值