提示：jquery要使用1版本，因为高版本已不兼容低版本的游览器。
参考url：http://www.cnblogs.com/wupeiqi/articles/5703697.html
原生ajax:Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。
XmlHttpRequest对象的主要方法：
 a. void open(String method,String url,Boolen async)

    用于创建请求

    参数：

        method： 请求方式（字符串类型），如：POST、GET、DELETE...

        url：    要请求的地址（字符串类型）

        async：  是否异步（布尔类型）

 b. void send(String body)

     用于发送请求

     参数：

         body： 要发送的数据（字符串类型）

 c. void setRequestHeader(String header,String value)

     用于设置请求头

     参数：

         header： 请求头的key（字符串类型）

         vlaue：  请求头的value（字符串类型）

 d. String getAllResponseHeaders()

     获取所有响应头

     返回值：

         响应头数据（字符串类型）

 e. String getResponseHeader(String header)

     获取响应头中指定header的值

     参数：

         header： 响应头的key（字符串类型）

     返回值：

         响应头中指定的header对应的值

 f. void abort()

     终止请求

XmlHttpRequest对象的主要属性：

 a. Number readyState

    状态值（整数）

    详细：

       0-未初始化，尚未调用open()方法；

       1-启动，调用了open()方法，未调用send()方法；

       2-发送，已经调用了send()方法，未接收到响应；

       3-接收，已经接收到部分响应数据；

       4-完成，已经接收到全部响应数据；

 b. Function onreadystatechange

    当readyState的值改变时自动触发执行其对应的函数（回调函数）

 c. String responseText

    服务器返回的数据（字符串类型）

 d. XmlDocument responseXML

    服务器返回的数据（Xml对象）

 e. Number states

    状态码（整数），如：200、404...

 f. String statesText

    状态文本（字符串），如：OK、NotFound...

实例：

前台代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>ajax</title>

 </head>

 <body>

     <p>

         <input name="test" />

         <input type="button" value="Ajax1" onclick="Ajax1()" />

     </p>

     <script>

         function getXHR() {

 {#            游览器兼容#}

             var xhr = null;

             if(XMLHttpRequest){

                 {#            新建#}

                 var xhr = new XMLHttpRequest();

             }else{

                 xhr = new ActiveXObject("Microsoft.XMLHTTP");

             }

         }

         function Ajax1() {

 {#            打开#}

             xhr.open('POST','/app04/ajax_json',true);

             xhr.onreadystatechange =function () {

 {#                onreadystatechange是readyState的回调函数，判断值为多少的时候执行什么动作#}

                 if(xhr.readyState == 4){

                     //表示接收完毕,以下打印返回值

                     var obj = JSON.parse(xhr.responseText);

                     console.log(obj);

                 }

             };

 {#            发请求时候额外带个头写法，CSRF可使用#}

             xhr.setRequestHeader('k1','v1');

             //django的post源码里已指定固定格式，否则后端无法收到数据

             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset-UTF-8');

             {#            发送,send发送格式固定#}

             xhr.send('name=root;pwd=123');

         }

     </script>

 </body>

 </html>

后台代码

 def ajax(request):

     return render(request,'app04/ajax.html')

 def ajax_json(request):

     print(request.POST)

     ret = {'code':True,'data':None}

     import json

     return HttpResponse(json.dumps(ret))

路由代码

     url(r'^ajax$',views.ajax),

     url(r'^ajax_json',views.ajax_json),

Ajax写法格式解释

$.Ajax({          # 提交到后台

    url:'/host', # 提交到哪里

    type:'POST' # 提交方式

    # 第一种写法

    data:{'k1':123,'k2':'root'} # 提交数据

    # 第二种写法

    data:$('#add_form').serialize(), #代替上一句，将form表单里所有数据统一打包发到后台

    # 注意如果data字典中还包含1个字典，这个包含的字典需要转为字符串才可以发送：JSON.stringfy({'k1','v1'})

    dataType:'JSON',    # 这里是jquery功能，将传回来的数据进行json解析，就不需要下面的函数再次进行解析了，下面函数中的参数就为obj对象

    traditional:true,   # 可以将data中的列表数据传到后台，python使用get_list来接收列表数据。

    success: function(data){  # 回调函数，等待接收上面提交后的返回数据

        // data是服务器端返回的字符串

        var obj = JSON.parse(data);

    }

    error:function(){ #当前台发送了一个请求到后台，后台未捕捉到发了个未知的错误，才触发这里执行

    }

})
建议：永远让服务端返回一个字典，返回方式：return HttpResponse(json.dumps(字典))
      不要使用render，因为返回的模板文件只做渲染，无法json转换，不支持redirect方法。
以下这些方法全部是调用上面的Ajax方法，不同的是只修改对应的type方法,所以说只用Ajax方法即可。
$.get(url='XX',data:{},success)
$.post
    - 跨域请求（jsonp,CORS）
    - ajax上传文件（2种方式）
伪造ajax请求代码
<form action="/app02/ajax_json" method="post" target="ifm"> #　target=ifm使form和iframe建立管理
    <iframe name="ifm"></iframe>  #通过iframe绑定form后进行在页面不刷新的情况下提交
    <input type="text" name="uname" />
    <input type="text" name="email" />
    <input type="submit" value="form提交" />
</form>
    时机：
        如果发送的是普通数据，使用顺序优先级：jquery,XMLHttpRequest,iframe

获取iframe标签的内容
    function submitForm() {
        $('#ifm').load(function () {
            var ifmcontent = $('#ifm').contents().find('body').text()
            console.log(JSON.parse(ifmcontent))
        })
    }
实例：上传文件
前端的3种写法
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="file" id="fafafa" name="fafafa"/>

<a>上传</a>

<input type="button" value="提交XHR" onclick="xhrSubmit()">

<input type="button" value="提交XHR" onclick="ajaxSubmit()">

<form id='fm1' enctype="multipart/form-data" action="/app02/upload_file/" method="post" target="ifm">

    <iframe id='ifm' name="ifm"></iframe>

    <input type="file" name="fafafa" onchange="changeUpload();"/>

    <input type="submit" onclick="iframeSubmit();" value="form提交"/>

</form>

<div id="preview"></div>

<script src="/static/jquery-1.12.4.min.js"></script>

<script>

    function changeUpload() {

{#        输入框改变自动执行，提交操作#}

        $('#fm1').submit()

        iframeSubmit()

    }

    function iframeSubmit() {

        $('#ifm').load(function () {

            var ifmcontent = $('#ifm').contents().find('body').text();

            var obj = JSON.parse(ifmcontent);

            $('#preview').empty();

            var tagimg = document.createElement('img');

            tagimg.src = '/' + obj.data;

            $('#preview').append(tagimg)

        })

    }

    function ajaxSubmit() {

        var file_obj = document.getElementById('fafafa').files[0];

        var fd = new FormData();

        fd.append('uname','afafaf');

        fd.append('fafafa',file_obj);

        $.ajax({

            url:'/app02/upload_file/',

            type:'POST',

            data:fd,

            processData:false,

            contentType:false,

            success:function (arg,a1,a2) {

                console.log(arg)

                console.log(a1)

                console.log(a2)

            }

        })

    }

    function xhrSubmit() {

        var file_obj = document.getElementById('fafafa').files[0];

        console.log(file_obj);

        var fd = new FormData();

        fd.append('uname','afafaf');

        fd.append('fafafa',file_obj);

        var xhr = new XMLHttpRequest();

        xhr.open('POST','/app02/upload_file/',true);

        xhr.onreadystatechange = function () {

            if(xhr.readyState == 4){

                var obj = JSON.parse(xhr.responseText);

                console.log(obj)

            }

        };

        xhr.send(fd)

    }

</script>

</body>

</html>

views的写法

def upload(request):

    if request.method == 'GET':

        return render(request,'app02/upload.html')

def upload_file(request): # 上传文件

    uname = request.POST.get('uname')

    fff = request.FILES.get('fafafa')

    import os

    upfile = os.path.join('static/img',fff.name)

    f = open(upfile,'wb')

    for d in fff.chunks():

        f.write(d)

    f.close()

    ret = {'code': True, 'data': upfile}

    import json

    return HttpResponse(json.dumps(ret))

def upload_img(request): # 上传图片

    request.GET.get('dir') # 这个方法可获取显示上传文件的类型

    obj = request.FILES.get('imgFile')

    import os

    upfile = os.path.join('static/img',obj.name)

    f = open(upfile,'wb')

    for d in obj.chunks():

        f.write(d)

    f.close()

    import json

    dic = {

        'error':0,

        'url':'/'+upfile,

        'message':'error'

    }

    return HttpResponse(json.dumps(dic))

django学习之- Ajax的更多相关文章

  1. Django学习---原生ajax

    Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...

  2. Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）

    我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...

  3. Django框架 之 Ajax

    Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...

  4. Django学习笔记（13）——Django的用户认证（Auth）组件，视图层和QuerySet API

    用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...

  5. Django学习笔记（20）——BBS+Blog项目开发（4）Django如何使用Bootstrap

    本文学习如何通过Django使用Bootstrap.其实在之前好几个Django项目中已经尝试使用过了Bootstrap,而且都留有学习记录,我已经大概有了一个大的框架,那么本文就从头再走一遍流程,其 ...

  6. Django学习笔记（18）——BBS+Blog项目开发（2）主体思路及流程

    这篇博客主要完成一个BBS+Blog项目,那么主要是模仿博客园的博客思路,使用Django框架进行练习. 准备:项目需求分析 在做一个项目的时候,我们首先做的就是谈清楚项目需求,功能需求,然后才开始写 ...

  7. Django学习笔记（16）——扩展Django自带User模型，实现用户注册与登录

    一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...

  8. Django学习笔记（11）——开发图书管理页面

    一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...

  9. 今天主要推荐一下django学习的网址!

    前言:每个月忙碌的头20天后,在上班时间投入到django理论学习的过程中,花了差不多3天时间简单的研究了一下django,着实废了我不少脑细胞. 采用虫师前辈的一张图和话: 如果你把这过程梳理清晰了 ...

随机推荐

  1. scala 通过jdbc访问mysql

    scala是jvm语言,运行在jvm之上 我们知道jdbc是java访问数据库的技术,那么scala能不能通过jdbc操作数据库呢,答案是可以的 部分代码如下: /** * 获取连接 */ priva ...

  2. BottomNavigationBar底部导航条用法

    先来张效果图 接下来是实现过程 1.加入依赖 compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0' 2.xml布局 fragment ...

  3. Android如何用阿里云的API进行身份证识别

    准备工作:在libs下添加 alicloud-Android-apigateway-sdk-1.0.1.jar,commons-codec-1.10-1.jar 在build.gradle添加  co ...

  4. JVM内存区域参数配置

    转自:https://www.jianshu.com/p/5946c0a414b5 需要提前了解的知识点: JVM内存模型 JVM垃圾回收算法 下图是JVM内存区域划分的逻辑图   JVM内存区域逻辑 ...

  5. This is such a crock of shit—From Scent of a woman

    - Mr. Slade. - This is such a crock of shit! - Mr. Trask. - Please watch your language, Mr. Slade. Y ...

  6. 响应式布局（CSS3弹性盒flex布局模型）

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

  7. iview upload 上传图片 不传服务器 转 base64

    开始的时候 找不到this了,后来想起来要用 ES6的箭头函数 就有this了 reader.onload = e => { // 读取到的图片base64 数据编码 将此编码字符串传给后台即可 ...

  8. RestTemplate Hashmap变为LinkedHashMap源码解读

    使用restTemplate远程调用服务,正常应该接收List<HashMap>数据,但实际却是List<LikedHashMap>经过不断地debug,终于找到了数据被转换成 ...

  9. 使用 Pytorch 实现 skip-gram 的 word2vec

    转载请注明 AIQ - 最专业的机器学习大数据社区  http://www.6aiq.com AIQ 机器学习大数据 知乎专栏 点击关注 链接地址: https://github.com/lonePa ...

  10. Socket通信时服务端无响应，客户端超时设置

    背景:在写一个客户端的socket程序,服务端没有返回消息,客户端一直在等待. 目标:我需要设置一个时间,如果超过这个时间客户端自动断开连接.最好是在服务端实现,客户端对我来说不可控.