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 ...

随机推荐

学习JUC源码（3）——Condition等待队列（源码分析结合图文理解）
前言在Java多线程中的wait/notify通信模式结尾就已经介绍过,Java线程之间有两种种等待/通知模式,在那篇博文中是利用Object监视器的方法(wait(),notify().notif ...
Nginx 配置日志路径（nginx.conf没有写log路径，所以debug的时候找不到日志）
缘由:nginx.conf没有写log路径,所以debug的时候找不到日志,遂在conf文件里写入了log路径 Setp1.nginx默认日志路径: /var/log/nginx Setp2.conf ...
Selenium多浏览器测试
在浏览器的兼容性测试中,会测试产品在不同浏览器上的兼容性,比较主流的浏览器有IE.Firefox.Chrome,Opera,Safari等.还有其它如360.QQ.遨游.百度等浏览器都是基于IE或者c ...
【vue】入门介绍
一.前端开发工具vscode 前端代码编写工具,使用vscode:vscode官网安装好之后,可以先装如下几个插件,方便后续的开发. 二.编写代码 1.vscode快捷键生成html代码在vsco ...
MongoDb二
获取集合的时候,可以传入bean的class文件.来实现数据的绑定.在这之前.需要自定义一个Codec类.进行数据的转换. MongoClient client=new MongoClient(new ...
JavaScript中对象是否需要加引号？
对象的属性名是包括空字符串在内的所有字符串. 那么问题来了,我们平时定义的对象如下,是没有引号""or''的,这样不加引号有没有错呢? 答案是,加不加分情况!但加了肯定没问题... ...
express框架路由未导出错误：Router.use() requires a middleware function but got a Object
在路由的文件下加入导出语句 module.exports = router 导入与导出需要一一对应
多线程应用之调用start()方法和run()方法的区别
今天在做项目的时候,遇到一个问题,两个一模一样的demo,运行出来的效果却一点也不一样,找了半天,就是有一行代码不同,一个是thread.start();一个是thread.run();和我预计的一样 ...
JavaScript基础知识梳理
一.简单数据类型 Number.String.Boolean.Undefined.Null 1.Number: 方法: toPrecision( ) 返回指定长度的数字(范围是1到100) toFix ...
SpringBoot整合Shiro完成验证码校验
SpringBoot整合Shiro完成验证码校验上一篇:SpringBoot整合Shiro使用Redis作为缓存首先编写生成验证码的工具类 package club.qy.datao.utils; ...

django ajax应用

ajax:

ajax过csrf认证

form表单文件上传：

ajax文件上传：

django ajax应用的更多相关文章

随机推荐

热门专题