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

随机推荐

浅析ARM协处理器CP15寄存器有关指令：MCR\MRC
ref:http://blog.csdn.net/gameit/article/details/13169405 背景: 在uboot中,start.s中涉及到了 CP15 的有关操作.查阅有关资料, ...
工具——eclipse debug小技巧
1.开启调试: 在代码编辑处右键单击,在弹出菜单中点击Debug As开始调试 2.几个快捷键: F5:跟入Step into, 一般会跟踪进入到调用函数的函数体,Step Over则不会跟踪进入,直 ...
Windows下Notepad++连接VMWare中的linux，然后无法安装NppFTP
一.关于Notepad++版本我的版本是最新版本:Notepad++ v7.7 32bit 版本最好选择32bit的,看别处的说法是官网上有这样的说明: Note that the most of ...
maftools|TCGA肿瘤突变数据的汇总，分析和可视化
本文首发于公众号“生信补给站”,https://mp.weixin.qq.com/s/WG4JHs9RSm5IEJiiGEzDkg 之前介绍了使用maftools | 从头开始绘制发表级oncoplo ...
c#基础知识梳理（三）
上期回顾 - https://www.cnblogs.com/liu-jinxin/p/10824638.html 一.方法一个方法是把一些相关的语句组织在一起,用来执行一个任务的语句块.每一个 C ...
Java数据结构总述
array list map set 链表..array 和list类似,增删慢,读取快,list长度可变,array长度固定, 链表增删快的list set 是一个没有重复数据的集合 map 是一个 ...
AI 公司与比赛
科大讯飞网站:https://www.iflytek.com/ 比赛:http://challenge.xfyun.cn/2019/ AI 大学:https://www.aidaxue.com/ 华 ...
Eureka服务注册于发现之Client搭建
Eureka在Server端的搭建已经有很多介绍的文章,同时也是学习Eureka的第一步. 搭建好注册中心后怎么进行服务注册和服务调用,是我们要讲的主要内容. 开发环境:IDEA2018.3+Spri ...
python多线程与多进程异步事件框架
多线程简单实现 #!/usr/bin/env python # -*- coding: UTF-8 -*- import logging import queue import threading f ...
vue路由（一）
“vue.js 路由允许我们通过不同的 URL 访问不同的内容.通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)”这段是从网上直接抄 ...

Django—Ajax

Ajax-get

Ajax-post

Ajax-post-upload

Django—Ajax的更多相关文章

随机推荐

热门专题