django ajax应用

ajax:

什么是ajax，有什么作用：

以前我们在页面向后台提交数据的时候都是使用from表单，这样的提交会在提交的时候将整个页面全部刷新，如果你在填写表单的时候提交之后发现某个数据不对，但是你已提交的就会将这个页面刷新，想要改就只能重新来过，这样用户的体验感是不好的；所以就有了ajax，它就能帮助开发人员解决这个问题；

 AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

 # 特点:异步请求和局部刷新

1. 局部刷新： 即不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

2. AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

　　　　　　a.同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

　　　　　　b.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

ajax的应用：

{% load static %}      # 导入文件路径，固定写法不能更改

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>

<body>

<div class="container" style="width: 500px;">

  <div class="form-group">

    <label  class="col-sm-2 control-label">账号</label>

    <div class="col-sm-10">

      <input type="text" class="form-control"  placeholder="账号" name="account" id="name">

    </div>

  </div>

  <div class="form-group">

    <label  class="col-sm-2 control-label">密码</label>

    <div class="col-sm-10">

      <input type="password" class="form-control"  placeholder="密码" name="password" id="pwd">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default" id="but">提交</button>

        <span id="error"></span>

    </div>

  </div>

</div>

</body>

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

   # 导入本地的文件时直接写一个static后边加加上文件名就行

<script>

 	# 触发器，当你鼠标点击提交按钮时触发，执行下边的代码

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

         # 获取输入框需要提交到后台的数据

        var account = $('#name').val();

        var password = $('#pwd').val();

        # 下边就是ajax的写法，

        # 通过ajax将拿到的数据发送给后端

        $.ajax({

            # 下边是发送请求的路径，

            url:'{% url 'login' %}',     # login是urls.py文件中相关路径别名

            # 发送请求的类型，post请求

            type:'post',

            # 下边是你需要提交到后端的数据，写成一个字典形式

            data:{account:account,password:password},

            # 下边是一个响应函数 ret是从后端返回的数据

            success:function (ret) {

                if (ret === '1'){ # 对后端返回的值进行比较是不是相同

                # 判断成功后使用location方法将当前页面跳转到指定的页面/home/

                    location.href='/home/'

                }

                else{

                    $('#error').text('用户名或者密码错误！')

                }

            }

        })

    })

</script>

</html>

后端如何接收数据并做处理：

def login(request):

    if request.method == 'GET':

        return render(request,'login.html')

	# 从ajax返回的数据是一个字典的形式，所以直接可以get去相应的值

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

    pwd = request.POST.get('password')

	# 对相应的数据进行比较

    if name == 'adrian' and pwd == '123':

        # 成功之后返回一个值

        return HttpResponse('1')

    # 失败之后返回一个值

    return HttpResponse('0')

csrftoken

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

　　

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

ajax过csrf认证

方式1：# 这个方式是将{% csrf_token %}写在前端的页面中，

    $.ajax({

      url: "/cookie_ajax/",

      type: "POST",

      data: {

        "username": "chao",

        "password": 123456,

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

          # 使用jQuery从页面中取出csrfmiddlewaretoken的值，拼接到data中

      },

      success: function (data) {

        console.log(data);

      }

    })

方式2：# 写在ajax中在服务器向浏览器发送页面的时候进行模板渲染的时候就进行替换了

	$.ajax({

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

    });

方式3

	#这个方式是使用jquery来操作cookie值：

    首先需要导入一个文件包：这个包是专门用来操作cookie的 下载网址 https://plugins.jquery.com/cookie/

    <script type="text/javascript" src="js/jquery.cookie.js"></script>

	$.ajax({

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

        #其实在ajax里面还有一个参数是headers，自定制请求头，可以将csrf_token加在这里，我们发contenttype类型数据的时候，csrf_token就可以这样加

})

jquery操作cookie: https://www.cnblogs.com/clschao/articles/10480029.html

form表单文件上传：

需要注意的是: enctype

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

# 注意如果用form表单上传文件时，需要设置上传的格式  enctype="multipart/form-data"  这种form_data的格式一般是把大数据一段一段隔开的

    {% csrf_token %}

    用户名: <input type="text" name="username">

    密码: <input type="password" name="password">

    头像: <input type="file" name="file"> # 获取文件

    <input type="submit">

</form>

views.py

def upload(request):

    if request.method == 'GET':

        print(settings.BASE_DIR) #/static/

        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)

            for chunk in file_obj.chunks():

                f.write(chunk)

        return HttpResponse('ok')

ajax文件上传：

参数：

1. processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，

             那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()

             ,最后得到一个［object，Object］形式的结果。

2. contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

             用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，

             比如contentType:"application/json"，即向服务器发送一个json字符串：

               $.ajax("/ajax_get",{

                  data:JSON.stringify({

                       a:22,

                       b:33

                   }),

                   contentType:"application/json",

                   type:"POST",

               });                          //{a: 22, b: 33}

             注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象

             views.py:   json.loads(request.body.decode("utf8"))

3. traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},

              traditional为false会对数据进行深层次迭代；

操作：

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

        var formdata = new FormData();

        {#由于ajax不能像form表单那样设置上传文件的格式，所以就需要借助FormData#}

        {# 首先创建一个formdata对象#}

        var files = $('[type=file]')[0].files[0];

		{#首先需要获取到文件信息，需要使用DOM的方法files来获取#}

        formdata.append('file',files);

        {#将需要的文件添加到这个对象中#}

        $.ajax({

            url:'{% url 'input' %}',

            type:'post',

            data:formdata,

            {#上传数据时直接写这个对象就行#}

            processData:false,   {#不处理数据#}

            contentType:false,   {#不设置内容类型#}

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

            success:function (ret) {

				{#逻辑代码#}

            }

        })

    })

django ajax应用的更多相关文章

Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿是不是还蛮好看的. 废 ...
django ajax练习
这几天遇到了django ajax请求出错的问题,总结一下前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...
关于Django Ajax CSRF 认证
CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...
django ajax增删改查
具于django ajax实现增删改查功能代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
python学习-- Django Ajax CSRF 认证
使用 jQuery 的 ajax 或者 post 之前加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...
django ajax 及批量插入数据分页器
``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求前端朝后端发送数据的编码 ...
Django——Ajax
1.Ajax简介 AJAX(Asynchronous Javascript And XML)--"异步的JavaScript与XML". Ajax使用Javascript语言与服务 ...
django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
Django ajax提交登录
一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...
django ajax报错解决：You called this URL via POST, but the URL doesn't end in a slash and you have APPEND_SLASH set.
Django版本号:1.11.15 django中ajax请求报错:You called this URL via POST, but the URL doesn't end in a slash a ...

随机推荐

layui的登录页面设计
主要的结构先导入layui的主要的js和css等 <html> <head> <meta charset="utf-8"> <title ...
SQL注入-DNS注入（一）
这篇文章相对来说比较入门,参考的文章是:https://www.jianshu.com/p/c805209244c2 0x00前言前段时间在做盲注分别是基于时间和基于布尔型的说真的这两种盲注真 ...
Python的环境是如何安装的，我来教你
01 初见Python Python编程语言是荷兰人Guido van Rossum在1990年代开发出来的. Gudio拥数学和计算机双硕士学位,但他更喜欢计算机.当时Gudio觉得现有的编程语言无 ...
python菜鸟教程基础入门
一. 可以使用'\'来连接多行.但是有括号的则不需要 a=b+\ c+\ d a1=['a', 'b'] 引号可以是单,双,三引号均可二. 1. python有5个标准类型:数字,字符串,列表,元组 ...
Python批量创建word文档（2）- 加图片和表格
Python创建word文档,任务要求:小杨在一家公司上班,每天都需要给不同的客户发送word文档,以告知客户每日黄金价格.要求在文档开始处给出banner条,价格日期等用表格表示.最后贴上自己的联系 ...
python初学者-判断一个数是否为素数
while True: #判断为真 num = int(input('请输入一个数:')) for i in range(2,num):#判断在num之前的数能不能把num整除 if(num%i == ...
Redis不仅仅是缓存，还是……
你需要一个经典数据库吗? 一段时间以来,巨大数量的数据处理迫使所有的应用程序在数据库层前添加缓存策略.即使经典数据库进行了大量的下划线优化,仍然不能提供足够的速度和可用性.主要原因在于数据存储越远,获 ...
JDK下载地址 Oracle JDK下载地址（已解决）
现在JDK开始收费了 Oracle官方对JDK的管理也变得严格了,现在想要在官网下载jdk需要先注册Oracle账号,这倒是小事但是网页反应慢注册填写内容复杂导致很多人不想注册. 不过有的人提供了公开 ...
Lightweight Render Pipeline
(翻译) Lightweight Render Pipeline (LWRP),轻量级渲染管线,是一个Unity预制的Scriptable Render Pipeline (SRP).LWRP可以为移 ...
v-on以及v-show、v-if的一些小杂碎
v-on的参数问题: 当通过methods中定义方法,以供@click调用时,需要注意参数问题: 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加.但是注意:如果方法本身中有一个参数,那么 ...

django ajax应用

ajax:

ajax过csrf认证

form表单文件上传：

ajax文件上传：

django ajax应用的更多相关文章

随机推荐

热门专题