Django—Ajax

Ajax-get

url

    url(r'^ajax_add/', views.ajax_add),

    url(r'^ajax_demo1/', views.ajax_demo1),

视图

def ajax_demo1(request):

    return render(request, "ajax_demo1.html")

def ajax_add(request):

    i1 = int(request.GET.get("i1"))

    i2 = int(request.GET.get("i2"))

    ret = i1 + i2

    return JsonResponse(ret, safe=False)

html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>AJAX局部刷新实例</title>

</head>

<body>

<input type="text" id="i1">+

<input type="text" id="i2">=

<input type="text" id="i3">

<input type="button" value="AJAX提交" id="b1">

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

<script>

  $("#b1").on("click", function () {

    $.ajax({

      url:"/ajax_add/",

      type:"GET",

      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},

      success:function (data) {

        $("#i3").val(data);

      }

    })

  })

</script>

</body>

</html>

Ajax-post

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试AJAX的data参数</title>

</head>

<body>

<button id="b1">点我</button>

<input type="text" id="i1">

<span></span>

<hr>

<div>111</div>

<div>222</div>

<div>333</div>

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

<script src="/static/setupAjax.js"></script>

<script>

    $("#b1").click(function () {

        // 先根据name 找到那个隐藏的input标签

        var csrfToken = $("[name='csrfmiddlewaretoken']").val();

        // 给/oo/发送AJAX请求

        $.ajax({

            url: '/oo/',

            type: 'POST',

            data: {

                "name": "alex",

                "hobby": JSON.stringify(["抽烟", "喝酒", "吹牛逼"]),

                // "csrfmiddlewaretoken": csrfToken

            },

            success:function (res) {

                console.log(res);

                // 反序列化

                // var ret = JSON.parse(res);  如果后端使用JsonResponse 返回响应，前端JS就不需要再反序列化

                if (res.code !== 0){

                    console.log(res.err);

                } else {

                    console.log(res.msg);

                }

            }

        })

    });

    var $i1 = $("#i1");

    // 给 i1 标签绑定一个失去焦点的事件

    $i1.on("input", function () {

        // this  --> 触发当前事件的DOM对象

        // 1. 取到用户输入的用户名

        var username = $(this).val();

        var _this = this;

        // 2. 发送到后端

        $.ajax({

            url: '/check/',

            type: 'get',

            data: {"username": username},

            success:function (res) {

                console.log(res);

                if (res.code !== 0){

                    // 表示用户名已经存在

                    $(_this).next().text(res.msg).css("color", "red")

                }

            }

        })

        // 3. 根据响应的结果做操作

    });

    // 给 i1 标签绑定一个获取焦点的事件

    $i1.focus(function () {

        $(this).next().text("");

    })

</script>

</body>

</html>

要引入的文件

/*

* 此文件一用于判断 ajax请求是不是非安全请求，如果是就在请求头中设置csrf_token

* */

// 定义一个从Cookie中根据name取值的方法

function getCookie(name) {

    var cookieValue = null;

    if (document.cookie && document.cookie !== '') {

        var cookies = document.cookie.split(';');

        for (var i = 0; i < cookies.length; i++) {

            var cookie = jQuery.trim(cookies[i]);

            // Does this cookie string begin with the name we want?

            if (cookie.substring(0, name.length + 1) === (name + '=')) {

                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));

                break;

            }

        }

    }

    return cookieValue;

}

// 调用上面的方法，从cookie中取出csrftoken对应的值

var csrftoken = getCookie('csrftoken');

//

function csrfSafeMethod(method) {

  // these HTTP methods do not require CSRF protection

  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));

}

$.ajaxSetup({

  beforeSend: function (xhr, settings) {

    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

      xhr.setRequestHeader("X-CSRFToken", csrftoken);

    }

  }

});

js文件

Ajax-post-upload

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>上传文件</title>

</head>

<body>

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

    {% csrf_token %}

    <input type="file" name="file" id="f1">

    <input type="submit" value="提交">

    <button id="b1" type="button">点我</button>

</form>

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

<script src="/static/setupAjax.js"></script>

<script>

    $("#b1").click(function () {

        // 创建一个FormData对象

        var obj = new FormData();

        // 将要上传的文件数据添加到对象中

        obj.append("file", document.getElementById("f1").files[0]);

        obj.append("name", "alex");

        $.ajax({

            url: "/upload/",

            type: "post",

            processData: false,  // 不让jQuery处理我的obj

            contentType: false,  // 不让jQuery设置请求的内容类型

            data: obj,

            success:function (res) {

                console.log(res);

            }

        })

    })

</script>

</body>

</html>

视图

# 上传文件测试

def upload(request):

    if request.method == "POST":

        # 从请求中取上传的文件数据

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

        filename = file_obj.name

        with open(filename, "wb") as f:

            for chunk in file_obj.chunks():

                f.write(chunk)

    return render(request, "upload.html")

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

随机推荐

Java链表设计
链表 1,链表的实现在实际开发之中对象数组是一项非常实用的技术,并且利用其可以描述出“多”方的概念,例如:一个人有多本书,则在人的类里面一定要提供有一个对象数组保存书的信息,但是传统的对象数组依赖于 ...
.net core partial view的一些心得
原文:.net core partial view的一些心得版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...
HotSpot JVM目录
一.知识结构整理 jvm体系大体分四大块: 类的加载机制 jvm内存结构 GC算法垃圾回收 GC分析命令调优二.运行时JVM结构组成及作用 http://www.cnblogs.com/imxi ...
sqlyog 如何导出建表语句
真傻了,这个问题弄了半天. 解决点击表名后,在右侧的信息栏里面有啊: PS - 个人博客链接:sqlyog 如何导出建表语句
VisualSVN 关于权限（第2篇）
最终的答案: 仓库本身不能给他增加访问权限,必须增加否则连不上,不增加的时候他默认就是No Access: 仓库本身可以理解为:祖宗,他是访问权限的根基.子目录会继承他的权限. 那么既然必须给他增加 ...
JS做2048
首先我们了解一下2048这个游戏的原理: 他由一个4x4二维数组组成,在游戏一开始时候在随机位置随机生成一个2或者4 如: 1.每点击一次开始就刷新一次游戏界面: 2.通过键盘的上下左右四个方向键分别 ...
vue的自定义指令
点击元素之外触发函数 <template> <div v-clickoutside="clickItemOut"></div> </tem ...
ajax获取后台数据出错parsererror
原因是dataType如果为json,返回的数据是text就会报错.
浅析Java中的集合
先了解一下集合与数组的区别:数组是java中存储基本数据类型.引用类型的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合只能存储引用类型的数据,长度可变,可在多数情况下使用. 集 ...
HCIP DAY2
OSPF协议的基本特点: 支持无类域间路由(CIDR) vlsm NA 无路由自环收敛速度快使用IP组播放收发协议数据支持多条等值路由静态路由动态路由等价路由浮动路由支持协议报文的认证 ...

Django—Ajax

Ajax-get

Ajax-post

Ajax-post-upload

Django—Ajax的更多相关文章

随机推荐

热门专题