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

随机推荐

06 ServletConfig、ServletContext_作用域对象
ServletConfig:表示servlet的配置信息,一个servlet对象对应一个servletconfig对象方法: 1.获取初始化参数 config.getInitParameter( ...
asp.net core-8. 配置的热更新
在asp.net core 发布了以后,在修改配置文件以后不需要重新发布,要实现只需要修改@inject IOptions<WebApplication1.Class> ClassAcce ...
18-MySQL DBA笔记-MySQL Server调优
第18章 MySQL Server调优本章将为读者介绍针对MySQL Server的优化,这也是DBA最熟悉的领域之一.首先我们介绍MySQL的主要参数,然后,讲述常见硬件资源的优化.我们假设读者已 ...
.NET Core中使用读取配置文件
引入Nuget的两个类库 Microsoft.Extensions.Configuration Microsoft.Extensions.Configuration.Json 使用 var build ...
微信支付之二维码支付(native)
HoJe男孩子你要加油阿准备材料微信支付需要的参数统一下单二维码回调接口用到的工具类 . 准备材料首先肯定是要有微信的开发文档开发文档地址再然后就是一些必的参数注意:回调地址异步接收微信支付结果 ...
基于【 centos7】四 || FastDFS集群+Nginx负载均衡
1. 架构设计 1.1 架构图 FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用F ...
三：后台的登录注册接口（moon项目，前面有一，二）
** 项目一共有 16 个页面,是一个电商网销项目,自己在网上的某网上找的一个要做的网站的设计图: 页面主要包括: 登录页 -- 注册页 -- 首页 -- 产品列表页 -- 产品详情页 -- 会员中 ...
S2-045、S2-046
前言 S2-045依然是一个Ognl表达式注入导致的RCE漏洞,且漏洞很严重.另外,还是建议读者阅读本篇文章前先看下系列文章的第一篇. 正文依然是第一篇文章中讲过,StrutsPrepareFilt ...
QCamera : no such file 问题
在项目 *.pro中添加即可. QT += core gui QT += multimedia QT += multimediawidgets QT += multimedia ==>对应< ...
SAP官方提供的人脸识别API
https://api.sap.com/api/face_detection_api/resource 准备一张克里斯蒂亚诺 - 罗纳尔多的图片: 点击Choose File按钮,加载这些图片,然后点 ...

Django—Ajax

Ajax-get

Ajax-post

Ajax-post-upload

Django—Ajax的更多相关文章

随机推荐

热门专题