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("系统错误!"); 
           } 
       }); 
   }

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区分大小写的。


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

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

接下来,判断接收到的两个参数都不为空,才构造一个博客对象,保存它,返回“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‘)); 
       } 
   });

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

时间: 2024-08-24 22:26:51

django中如何实现ajax(post)日记选的相关文章

Django中的Ajax详解

AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求:异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新:(这一特点给用户的感受是在不知不觉中完成请

django中使用Ajax

内容: 1.Ajax原理与基本使用 2.Ajax发送get请求 3.Ajax发送post请求 4.Ajax上传文件 5.Ajax设置csrf_token 6.django序列化 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html 1.Ajax原理与基本使用 关于Ajax的原理及其基本使用,直接看这篇博文即可:https://www.cnblogs.com/wyb666/p/9387488.html 2.Ajax发送get请求 views.py:

Django中ajax的基本用法

初识Ajax: ? Ajax并不是一门新的语言,它其实就是基于js写的一个功能模块而已 由于原生js书写ajax较为繁琐,django中我们一般直接使用jQuery封装好的ajax模块 案例: ? 页面上有是三个input框,一个按钮,用户在前两个框中输入数字,点击按钮保证页面不刷新的情况下将数据发到后端做计算,再将计算好的结果发送给前端展示到第三个input框中 ajax基本语法结构 $.ajax({ // 1. 到底朝哪个后端提交数据 url:'', // 控制数据的提交路径 (有三种方法,

bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind

今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一点特别的是另外一个js的方法中会进行一个ajax, 会根据ajax返回的结果来进行返回true或者false. 在测试的过程中我发现不管怎么弄, 最后返回的都是undefind. 下面来模拟一下这个场景 上面这个例子中,flag一直都是undefind,ajax已经是同步的情况下依旧返回undefi

Django中视图总结[urls匹配,HttpRequest对象,HttpResponse对象,对象序列化接受及案例]

视图的功能: 接收请求,进行处理,返回应答. 视图返回的内容为: HttpResponse的对象或子对象 render 返回的是HttpResponse的对象 JsonResponse是HttpResponse的子类 HttpResponseRedirect也是HttpResonse的子类 redirect是HttpResponseRedirect的一个简写 总结:所以视图返回的内容一般为:render,redirect,JsonResponse,Httpresponse 定义视图函数分为两步

django中的静态文件管理

一个站点通常需要保存额外的文件,比如图片   css样式文件   js脚本文件 ,在django中,倾向于将这些文件称为 静态文件.django提供了django.contrib.staticfiles 模块来帮助我们方便的管理静态文件. 配置静态文件的两种方式: 1  配置单独app下的静态文件,比如某个app下的单独的图片. 2  配置整个project下的静态文件,适用于那些和单独app关联不大的文件,比如jquery  bootstrap  等等 配置步骤: 1  首先,我们需要确认在s

Django中的模式(mvc)

最近准备用Python做做网站,框架选了django,第一次接触web框架,感觉很陌生,model view什么的很奇怪,不过了解了mvc这个模式之后好了很多,今天记录下web中长见的几种模式. 以下内容转自:http://blog.csdn.net/hudan2714/article/details/50990359 MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数

Django中的CSRF

CSRF(Cross Site Request Forgery, 跨站域请求伪造) CSRF 背景与介绍 CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其他安全隐患,比如 SQL 脚本注入,跨站域脚本攻击等在近年来已经逐渐为众人熟知,很多网站也都针对他们进行了防御.然而,对于大多数人来说,CSRF 却依然是一个陌生的概念.即便是大名鼎鼎的 Gmail, 在 2007 年底也存在着 C

Django中使用Bootstrap展示树形结构

概述 在企业管理系统中,经常会有树形结构需求,例如:组织结构.权限等等,本文使用Django和Bootstrap Tree View来展示企业组织结构和对应组织的人员. 实现 模型类(models.py) class Department(models.Model): name = models.CharField(u'单位名称', max_length=30) pri = models.IntegerField(u'序号') desc = models.CharField(u'备注', max