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

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

1. ajax概述

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

2. ajax应用

代码示例：

{% 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导入的更多相关文章

Django框架之 Ajax
Django框架之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化一.AJA ...
Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
Python之Flask和Django框架解决跨域问题，配合附加ajax和fetch等js代码
Flask框架py解决跨域问题示例: # -*- coding: utf- -*- # by zhenghai.zhang from flask import Flask, render_templa ...
Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）
12.4 Cookie和Session 12.41 cookie Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...
Django框架-模型层3/数据传输/Ajax
目录一.orm查询优化 1.only与defer 2.select_related与prefatch_related 二.模型层choices参数三.MTV与MVC模型 1.MVC 2.MTV 3 ...
Django框架----Ajax
一.Ajax准备知识:json 说起json,我们大家都了解,就是python中的json模块,那么json模块具体是什么呢?那我们现在详细的来说明一下 1.json(Javascript Obie ...
Django框架之 Form表单和Ajax上传文件
Django框架之 Form表单和Ajax上传文件浏览目录 Form表单上传文件 Ajax上传文件伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
Django框架之基于Ajax中csrf跨站请求伪造
Django框架之基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
Django框架全面讲解
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

随机推荐

HBase 中加盐（Salting）之后的表如何读取：Spark 篇
我们知道,HBase 为我们提供了 hbase-mapreduce 工程包含了读取 HBase 表的 InputFormat.OutputFormat 等类.这个工程的描述如下:This module ...
在Unix系统中执行可执行文件
这篇文章是我在一个叫做Charlotte数据挖掘的公众号上看到的文章,文首提到转载自"朱小厮的博客",当我今天执行一个自己编译的可执行文件后的运行阶段想到了这篇文章,直接一次成功. ...
Linux 之Mycat搭建报错 java.net.MalformedURLException: Local host name unknown: java.net.UnknownHostException
搭建MyCat环境时出现错误: 代理抛出异常错误: java.net.MalformedURLException: Local host name unknown: java.net.Unknown ...
WeChair项目Beta冲刺(8/10)
团队项目进行情况 1.昨日进展 Beta冲刺第八天昨日进展: 前后端并行开发,项目按照计划有条不絮进行 2.今日安排前端:扫码占座功能和预约功能并行开发后端:扫码占座后端逻辑开发,编码使用 ...
MongoDB设计方法及技巧
MongoDB是一种流行的数据库,可以在不受任何表格schema模式的约束下工作.数据以类似JSON的格式存储,并且可以包含不同类型的数据结构.例如,在同一集合collection 中,我们可以拥有以 ...
为什么 group by后面必须跟selecte 后面的除了聚集函数外的所有字段
如:SELECT store_name, SUM(Sales) FROM Store_Information GROUP BY store_name 可以而SELECT store_name, add ...
半导体质量管理（LineWorks）_SPACE（统计过程分析和控制环境）
LineWorks作为SEMI的质量管理,可为半导体制造商提供对实施标准,产品质量,质量和指标验证的全面控制.有许多附加模块和SPACE-Chart插件,可根据个人需求进行灵活调整. 三个主要特征是: ...
Python-使用tkinter canvas绘制的电子时钟
#!/usr/bin/env python # -*- coding: utf-8 -*- from tkinter import * import math import threading imp ...
09 . Kubernetes之pv、pvc及使用nfs网络存储应用
PV,PVC概述 PV的全称是: PersistentVolume (持久化卷),是对底层的共享存储的一种抽象,PV由管理员进行创建和配置,它和具体的底层的共享存储技术的实现方式有关,比如Ceph.G ...
Oracle Solaris 11.4安装桌面/gdb
文章目录 1. 说明 2. 挂载镜像 3. 安装桌面 4. 安装gdb 5. 重启OS 1. 说明该文承接上文Solaris 11.4安装,映像包管理系统(IPS)搭建. Solaris 11.4的 ...

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

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

1. ajax概述

2. ajax应用

3. ajax上传文件

4. jsonresponse应用

5. csrftoken /跨站请求伪造

6. django中setting引用

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

随机推荐

热门专题