Django框架09 /ajax、crsf、settings导入

1. ajax概述

  • 使用Javascript语言与服务器进行异步交互，AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
  • 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
  • 特性：异步请求/ 局部刷新

2. ajax应用

  • 代码示例：

    login.html

    {% load static %}  <!-- 引入jquery文件的第二种方式 -->
    
<!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>

<!-- form方式提交数据 -->
    
<form action="" method="post">
    
    {% csrf_token %}
    
    用户名: <input type="text" name="username">
    
    密码: <input type="password" name="password">
    
    <input type="submit">
    
</form>

<!-- ajax方式提交数据 -->
    
{% csrf_token %}
    
用户名: <input type="text" id="username">
    
密码: <input type="password" id="password">
    
<button id="sub">提交</button>
    
<span class="error"></span>

</body>

<!-- 原jquery文件引入方式 -->
    
<script src="/static/js/jquery.js"></script>
    
<!-- 引入jquery文件的第二种方式 -->
    
<script src="{% static 'js/jquery.js' %}"></script>

<!-- 引入jquery.cookie文件，通过jquer操作cookie -->
    
<script src="{% static 'js/jquery.cookie.js' %}"></script>

<script>
    
    $('#sub').click(function () {
    
        var uname = $('#username').val();
    
        var pwd = $('#password').val();
    
        var csrf = '{{ csrf_token }}';

        //不发送数据
    
         $.ajax({
    
        	url:'{% url "login" %}',
    
         	type:'get',
    
            success:function (res) {
    
                console.log(res);
    
            }
    
        })

        //发送数据
    
        $.ajax({
    
            url: '{% url "login" %}',
    
            type: 'post',
    
            data: {username: uname, password: pwd},
    
            success: function (res) {
    
                console.log(res);
    
                if (res === '1') {
    
                    // $('.error').text('登录成功');
    
                    location.href = '/home/'; // http://127.0.0.1:8000/home/
    
                } else {
    
                    $('.error').text('用户名密码错误!');
    
                }
    
            }
    
        })
    
    })

</script>
    
</html>

    view.py

    def login(request):
    
    if request.method == 'GET':
    
        return render(request,'login.html')
    
    else:
    
        uname = request.POST.get('username')  # ajax中data设置的键
    
        pwd = request.POST.get('password')
    
        if uname == 'liu' and pwd == '123':
    
            return HttpResponse('1')
    
        else:
    
            return HttpResponse('0')

def home(request):
    
    return render(request,'home.html')

3. ajax上传文件

  • 代码示例：

    upload.html

    {% load static %}
    
<!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>
    
<h1>文件上传</h1>

<!-- form表单上传 enctype="multipart/form-data" *** -->
    
<form action="" method="post" enctype="multipart/form-data">
    
    {% csrf_token %}
    
    用户名: <input type="text" name="username">
    
    密码: <input type="password" name="password">
    
    头像: <input type="file" name="file">
    
    <input type="submit">
    
</form>

<!-- ajax上传 -->
    
{% csrf_token %}

用户名: <input type="text" id="username">
    
密码: <input type="password" id="password">
    
<!-- 上传多个文件 -->
    
上传文件: <input type="file" multiple>
    
<!-- 上传单个文件 -->
    
上传文件: <input type="file">

<button id="sub">提交</button>
    
<span class="error"></span>
    
</body>

<script src="{% static 'js/jquery.js' %}"></script>
    
<script src="{% static 'js/jquery.cookie.js' %}"></script>

<script>

    $('#sub').click(function () {

        var formdata = new FormData();

        var uname = $('#username').val();
    
        var pwd = $('#password').val();
    
        var file_obj = $('[type=file]')[0].files[0];

        formdata.append('username', uname);
    
        formdata.append('password', pwd);
    
        formdata.append('file', file_obj);

        $.ajax({
    
            url: '{% url "upload" %}',
    
            type: 'post',
    
            data: formdata,

            //必须写/告诉ajax不对data数据进行任何的加工处理
    
            processData: false, //不处理数据
    
            contentType: false,	//不设置内容类型

            headers: {
    
                "X-CSRFToken": $.cookie('csrftoken'),
    
            },
    
            success: function (res) {
    
                console.log(res);
    
                if (res === '1') {
    
                    $('.error').text('上传成功');
    
                } else {
    
                    $('.error').text('上传错误!');
    
                }
    
            }
    
        })
    
    })

</script>
    
</html>

    view.py

    def upload(request):
    
    if request.method == 'GET':
    
        return render(request,'upload.html')
    
    else:
    
        print(request.POST)
    
        print(request.FILES)
    
        uname = request.POST.get('username')
    
        pwd = request.POST.get('password')

        file_obj = request.FILES.get('file')  # 文件对象---相当于是文档句柄
    
        print(file_obj.name)  # 文件名

        with open(file_obj.name,'wb') as f:
    
            # 按行将文件写入
    
            for i in file_obj:
    
                f.write(i)
    
            # 按固定字节将文件写入，一次65531个字节
    
            for chunk in file_obj.chunks():
    
                f.write(chunk)

        return HttpResponse('ok')

4. jsonresponse应用

  • 代码示例：

    jsontest.html

    {% load static %}
    
<!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>

用户名: <input type="text" id="username">
    
密码: <input type="password" id="password">

<button id="sub">提交</button>
    
<span class="error"></span>

</body>

<script src="{% static 'js/jquery.js' %}"></script>
    
<script src="{% static 'js/jquery.cookie.js' %}"></script>

<script>

    $('#sub').click(function () {
    
        var uname = $('#username').val();
    
        var pwd = $('#password').val();

        $.ajax({
    
            url: '{% url "jsontest" %}',
    
            type: 'post',
    
            data: {username: uname, password: pwd},
    
            headers: {
    
                "X-CSRFToken": $.cookie('csrftoken'),
    
                // contentType:'application/json',
    
                // 可以指定传输文件的类型，指定json后django无法解析
    
            },
    
            success: function (res) {
    
			   //方式一：
    
                var res = JSON.parse(res);  //-- 相当于python中json.loads()
    
                console.log(res, typeof res);

                //将对象转换成字符串类型
    
                //JSON.stringify()  -- 相当于python中json.dumps

                //方式二、三
    
                if (res.status === 1000) {
    
                    location.href = '/home/'; // http://127.0.0.1:8000/home/

                } else {
    
                    $('.error').text(res.msg);
    
                }
    
            }
    
        })
    
    })

</script>
    
</html>

    view.py

    def jsontest(request):
    
    """
    
    状态码;
    
        1000 : 登录成功
    
        1001 : 登录失败

    :param request:
    
    :return:
    
    """

    if request.method == 'GET':
    
        return render(request,'jsontest.html')
    
    else:
    
        username = request.POST.get('username')
    
        pwd = request.POST.get('password')
    
        ret_data = {'status':None,'msg':None}
    
        print('>>>>>',request.POST)
    
        # 如果ajax传输指定的内容类型是json的话，django无法解析
    
        # <QueryDict: {'{"username":"123","password":"123"}': ['']}>
    
        if username == 'liu' and pwd == '123':
    
            ret_data['status'] = 1000  # 状态码
    
            ret_data['msg'] = '登录成功'
    
        else:
    
            ret_data['status'] = 1001  # 状态码
    
            ret_data['msg'] = '登录失败'

        # 方式一：
    
        ret_data_json = json.dumps(ret_data,ensure_ascii=False)
    
        return HttpResponse(ret_data_json)

        # 方式二：
    
    	  return HttpResponse(ret_data_json,content_type='application/json')

    	  # 方式三：/省略将字典转换成字符串和指定类型
    
    	  return JsonResponse(ret_data)

        # 注意：当传输的数据ret_data是非字典数据类型的话JsonResponse不会序列化
    
        return JsonResponse(ret_data,safe=False)

# django没有json类型解释器

# django对内容类型解析伪代码
    
'''
    
ret = username=123&password=123  -- content-type:...urlencoded
    
if content-type == 'urlencoded':
    
    res_list = ret.split('&')
    
    for i in res_list:
    
        k = i.split('=')
    
        request.POST[k[0]] = k[1]
    
elif content-type=='multipart/form-data':
    
    ...
    
    request.FILES

elif content-type == 'application/json'

'''

  • 注意:

    外部文件导入的方式来写js代码,那么js代码中不能写django的模板语法,因为html文件的加载顺序:url--视图--html模板渲染 --- return给浏览器 -- 浏览器渲染 --- srcipt的src --才去请求js文件 --那么这个js文件的代码此时才加载到你的html文件中 -- 就没有模板渲染的步骤了 -- 就没有办法替换对应的模板语法.

5. csrftoken /跨站请求伪造

  • csrf简述

    CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。攻击者通过HTTP请求将数据传送到服务器，从而盗取回话的cookie。盗取回话cookie之后，攻击者不仅可以获取用户的信息，还可以修改该cookie关联的账户信息。

  • 解决csrf攻击

    解决csrf攻击的最直接的办法就是生成一个随机的csrftoken值，保存在用户的页面上，每次请求都带着这个值过来完成校验。

  • form表单过csrf认证

    <form action="" method="post">
    
    {% csrf_token %}
    
    <!-- form表单里面加上这个标签,模板渲染之后就是一个input标签 -->
    
    type=hidden  name=csrfmiddlewaretoken  value='asdfasdfasdf'
    
    用户名: <input type="text" name="username">
    
    密码: <input type="password" name="password">
    
    <input type="submit">
    
</form>

  • ajax过csrf认证

    {% load static %}
    
<!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
</head>
    
<body>

{% csrf_token %}

用户名: <input type="text" id="username">
    
密码: <input type="password" id="password">
    
<button id="sub">提交</button>
    
<span class="error"></span>
    
</body>

<script src="{% static 'js/jquery.js' %}"></script>
    
//引入jquery.cookie.js文件通过jqery操作cookie
    
<script src="{% static 'js/jquery.cookie.js' %}"></script>

<script>
    
    $('#sub').click(function () {

        var uname = $('#username').val();
    
        var pwd = $('#password').val();
    
	    //方式一：
    
        var csrf = $('[name=csrfmiddlewaretoken]').val();
    
        //方式二：
    
        var csrf = '{{ csrf_token }}';

        $.ajax({
    
           url: '{% url "login" %}',
    
           type: 'post',
    
           //方式一、二：
    
           data:{username:uname,password:pwd,csrfmiddlewaretoken:csrf},

           //方式三：
    
           data: {username: uname, password: pwd},
    
           headers: {
    
                "X-CSRFToken": $.cookie('csrftoken'),
    
            },
    
            //其实在ajax里面还有一个参数是headers，自定制请求头，可以将csrf_token加在这里，我们发contenttype类型数据的时候，csrf_token就可以这样加
    
           success: function (res) {
    
                console.log(res);
    
                if (res === '1') {
    
                    location.href = '/home/';
    
                } else {
    
                    $('.error').text('用户名密码错误!');
    
                }
    
            }
    
        })
    
    })

</script>
    
</html>

6. django中setting引用

  • 方式一：

    from 项目名  import settings
    
# 只能从项目目录下的setting去查找，找不到会报错，没有此setting项目也能启动

  • 方式二：

    from django.conf import settings  #推荐使用
    
# 先从本项目目录下的setting查找，找不到去global setting去查找

print(settings.BASE_DIR)  #/static/

Django框架09 /ajax、crsf、settings导入的更多相关文章

  1. Django框架 之 Ajax

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

  2. Django框架之Ajax和form组件

    一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...

  3. Python之Flask和Django框架解决跨域问题，配合附加ajax和fetch等js代码

    Flask框架py解决跨域问题示例: # -*- coding: utf- -*- # by zhenghai.zhang from flask import Flask, render_templa ...

  4. Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）

    12.4 Cookie和Session 12.41 cookie Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...

  5. Django框架-模型层3/数据传输/Ajax

    目录 一.orm查询优化 1.only与defer 2.select_related与prefatch_related 二.模型层choices参数 三.MTV与MVC模型 1.MVC 2.MTV 3 ...

  6. Django框架----Ajax

    一.Ajax准备知识:json 说起json,我们大家都了解,就是python中的json模块,那么json模块具体是什么呢?那我们现在详细的来说明一下 1.json(Javascript  Obie ...

  7. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  8. Django框架 之 基于Ajax中csrf跨站请求伪造

    Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({     data: {csrfmiddlewaretoken: ...

  9. Django框架全面讲解

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

随机推荐

  1. cb39a_c++_STL_算法_for_each_transform_比较

    cb39a_c++_STL_算法_for_each_transform_比较for_each() 速度快,不灵活transform() 速度慢, 非常灵活 STL算法-修改性算法for_each()c ...

  2. 万级TPS亿级流水-中台账户系统架构设计

    万级TPS亿级流水-中台账户系统架构设计 标签:高并发 万级TPS 亿级流水 账户系统 背景 业务模型 应用层设计 数据层设计 日切对账 背景 我们需要给所有前台业务提供统一的账户系统,用来支撑所有前 ...

  3. Vmware虚拟机克隆以及关闭防火墙

    vmware虚拟机克隆之后,一定要修改克隆机器的mac地址和IP上网地址,不能和之前的机器一样

  4. PV、UV、VV、IP的区别

    PV.UV.VV.IP的区别 PV即Page View,网站浏览量 指页面的浏览次数,用于衡量网站用户访问的网页数量.用户每次打开一个页面便记录1次PV,多次打开同一页面则浏览量累计. 一般来说,PV ...

  5. F查询与Q查询、事务及其它

    一.F查询和Q查询 1.1 F查询 在上面所有的例子中,我们构造的过滤器都是将字段值与某个我们自己设定的常量做比较.如果是对两个字段的值做比较,那这时候就要用到F查询了. Django提供F()来做这 ...

  6. Python 简明教程 --- 9，Python 编码

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 当你选择了一种语言,意味着你还选择了一组技术.一个社区. -- Joshua Bloch 目录 1, ...

  7. js语法基础入门（3）

    3.数据类型 3.1.数据类型学习重点 前面我们通俗的讲了,数据类型其实就是对数据进行了分类,那么,在js中到底把数据分成了几类?这些类的名称叫什么?每个分类下面有那些值?这些问题是需要记清楚的,例如 ...

  8. python冷知识

    目录 省略号也是对象 奇怪的字符串 and 和 or 的取值顺序 访问类中的私有方法 时有时无的切片异常 两次 return for 死循环 intern机制 省略号也是对象 在python中一切皆对 ...

  9. 洛谷 P1991 【无线通讯网】

    这道题找到关键点那就是模板题了,代码好写哒~ 因为有S个电话,两个电话就可以连通两个块,那是不是我们就可以看做一条无消耗的边,提前连了起来.根据Kruskal的思想,我们每次加入最小的边,直到联通,由 ...

  10. IDEA中文注释难看的简单解决办法

    好多人会发现IDEA这款集成开发工具的中文(主要是在注释上面)显示都比较难看,如下面: 都以为是字体的原因,于是各种替换字体,麻烦不说,还容易造成乱码的问题. 真正难看的原因并不是字体,而是以为是斜体 ...