接上篇随笔。继续介绍ajax的使用。

上篇友情连接：http://www.cnblogs.com/liluning/p/7831169.html

本篇导航：

一、Ajax响应参数

上篇最后介绍了ajax的请求参数现在补充一个响应参数

dataType：

预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。 默认不需要显性指定这个属性，

ajax会根据服务器返回的content Type来进行转换； 比如我们的服务器响应的content Type为json格式，这时ajax

方法就会对响应的内容进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式的对

象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用 data Type。dataType的可用

值：html｜xml｜json｜text｜script

简单说就是告诉服务器需要返回什么数据类型

二、csrf 跨站请求伪造

我们之前用form表单POST提交时如果没有｛% csrf_token %｝客户端收不到数据会报错同样用ajax POST提交数据也有同样的错误那么准么解决呢？

1、方法一

$.ajaxSetup({

    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },

});

$.ajax({

   ...

})

缺点：当js与html文件分离时，{{ csrf_token }} 无法被渲染失去作用，用方法一必须将js和html写在一起

2、方法二

{% csrf_token %}

$.ajax({

    url:"",

    type:"POST",

    data:{

        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),

    }

})

缺点：html body标签中必须存在{% csrf_token %}

3、方法三

//<script src="{% static 'js/jquery.cookie.js' %}"></script> 需要下载对应文件

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

$.ajax({

    headers:{"X-CSRFToken":$.cookie('csrftoken')},

})

缺点：基本通用哈哈哈

三、jQuery.serialize()

serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。serialize()函数常用于将表单内容序列化，以便用于AJAX提交。该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

简单总结：就是说我们如果有很多input标签内容需要提交总不会全部写在data中罗列出来吧，这就用到serialize()函数了可以帮我们一次性提交数据到客户端。

例如：

<form name="myForm" action="http://www.365mini.com" method="post">

    <input name="uid" type="hidden" value="1" />

    <input name="username" type="text" value="张三" />

    <input name="password" type="text" value="123456" />

    <select name="grade" id="grade">

        <option value="1">一年级</option>

        <option value="2">二年级</option>

        <option value="3" selected="selected">三年级</option>

        <option value="4">四年级</option>

        <option value="5">五年级</option>

        <option value="6">六年级</option>

    </select>

    <input name="sex" type="radio" checked="checked" value="1" />男

    <input name="sex" type="radio" value="0" />女

    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳

    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步

    <input name="hobby" type="checkbox" value="3" />羽毛球

    <input name="btn" id="btn" type="button" value="点击" />

</form>

提交数据

对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

序列化所有：$("form").serialize()

uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2 

部分序列化：$(":text, select, :checkbox").serialize()

username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2

view视图函数如何取值呢？和以前的POST请求相同

request.POST.get("name")  //input中的name属性

四、上传文件

1、普通上传文件

1）template

<form action="/upload/" method="post" enctype="multipart/form-data">

    {% csrf_token %}

    <p>用户名<input type="text" name="user"></p>

    <p>头像<input type="file" name="avatar"></p>

    <input type="submit">

</form>

enctype属性不可缺少

2）view

def upload(request):

    if request.method=="POST":

        print("POST", request.POST)

        print("FILES",request.FILES)  # FILES <MultiValueDict: {}>

        file_obj=request.FILES.get("avatar")

        print(file_obj.name,"-----")

        with open(file_obj.name,"wb") as f:

            for i in file_obj:

                f.write(i)

        return HttpResponse("成功")

    return render(request,"upload.html")

这是将上传的文件写入到本地file_obj的name方法可以取到文件名称

3、Ajax(FormData)

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

1）template

<body>

<form action="" id="s1">

    <p>姓名<input type="text"></p>

    <p>密码<input type="password"></p>

    <p>头像<input type="file" id="upload_avatar"></p>

</form>

<p><button class="Ajax_send">提交</button><span class="login_error"></span></p>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>

     function foo() {

        $(".login_error").html("")

    }

    $(".Ajax_send").click(function () {

        var formData=new FormData();

        formData.append("username",$(":text").val());

        formData.append("password",$(":password").val());

        formData.append("avatar",$("#upload_avatar")[0].files[0]);

        $.ajax({

            url:"/get_ajax/",

            type:"POST",

            headers:{"X-CSRFToken":$.cookie('csrftoken')},

            data:formData,

            contentType:false,

            processData:false,

            success:function (data) {

                var data=JSON.parse(data);

                if(!data["flag"]){

                    $(".login_error").html("用户名或者密码错误")

                    setTimeout(foo,3000)

                }

            }

        })

    })

</script>

</body>

2）view

def get_ajax(request):

    username=request.POST.get("username")

    password=request.POST.get("password")

    print("FIFLE",request.FILES)

    print("POST",request.POST)

    response={"flag":False}

    if username=="bjd" and password=="":

        response["flag"]=True

    import json

    return HttpResponse(json.dumps(response))

71、django之Ajax续的更多相关文章

  1. django之Ajax续

    接上篇随笔.继续介绍ajax的使用. 上篇友情连接:http://www.cnblogs.com/liluning/p/7831169.html 本篇导航: Ajax响应参数 csrf 跨站请求伪造 ...

  2. python Django之Ajax

    python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...

  3. django 接受 ajax 传来的数组对象

    django 接受 ajax 传来的数组对象 发送:ajax 通过 POST 方式传来一个数组 接收:django 接受方式 array = request.POST.getlist(‘key[]’) ...

  4. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  5. Django使用AJAX调用自己写的API接口

    Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...

  6. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  7. Django之Ajax提交

    Ajax 提交数据,页面不刷新 Ajax要引入jQuery Django之Ajax提交 Js实现页面的跳转: location.href = "/url/" $ajax({ url ...

  8. Django框架第九篇--Django和Ajax、序列化组件(serializers)、自定义分页器、模型表choice参数

    Django和Ajax 一.什么是Ajax AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语 ...

  9. Django之AJAX传输JSON数据

    目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...

随机推荐

  1. 基于搜狗搜索的微信公众号爬虫实现（C#版本）

    Author: Hoyho Luo Email: luohaihao@gmail.com Source Url:http://here2say.me/11/ 转载请保留此出处 本文介绍基于搜狗的微信公 ...

  2. SQLserver学习（四）——T-SQL编程之事务、索引和视图

    今天来分享下T-SQL高级编程中的事务.索引.视图,可以和之前的SQL server系列文章结合起来. 一.事务 事务(TRANSACTION)是作为单个逻辑工作单元执行的一系列操作,这些操作作为一个 ...

  3. KM算法的应用

    HDU2255 模板     难度x HDU2282 思维     难度XXx HDU3722 模板     难度X HDU3395 模版 HDU1533 最小值模型 难度x HDU2853 HDU3 ...

  4. AJAX学习前奏----JS基础加强

     AJAX学习前奏----JS基础加强 知识概要: 1.js类&属性&方法的定义 2.静态属性与方法 3.构造方法 4.原型的使用 5.Object对象直接加属性和方法 6.JSO ...

  5. NPOI导出excel（带图片）

    近期项目中用到Excel导出功能,之前都是用普通的office组件导出的方法,今天尝试用下NPOI,故作此文以备日后查阅. 1.NPOI官网http://npoi.codeplex.com/,下载最新 ...

  6. app启动页问题

    今天自己做的小作品准备提交,就差一个启动页,各种百度,各种搜,结果还好最后终于出来了,和大家分享一下,这个过程中遇到的各种小问题.(注XCode版本为7.2) 1.启动页一般都是图片,因为苹果有4,4 ...

  7. 【学习】原生js学习笔记1：添加class和使input为不可用

    <input type="checkbox" id="new_check" onChange="noUse()" checked> ...

  8. centos7安装shipyard没有本地容器及镜像

    目前docker的使用越来越多,自然需要docker的管理工具.现在使用web管理的较多,web基本上实现了跨平台,只需要浏览器,不要额外的管理客户端.web管理主要推荐shipyard和kubern ...

  9. word2vec 在 非 自然语言处理 (NLP) 领域的应用

    word2vec 本来就是用来解决自然语言处理问题的,它在 NLP 中的应用是显然的. 比如,你可以直接用它来寻找相关词.发现新词.命名实体识别.信息索引.情感分析等:你也可以将词向量作为其他模型的输 ...

  10. ADO.NET生成的数据库连接字符串解析

    1.概述 当我们使用ADO.NET数据实体模型生成的时候,在项目目下生成一个.edmx文件的同时,还会在app.config里面出现如下一个代码串: <?xml version="1. ...