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的更多相关文章

  1. Django ajax MYSQL Highcharts<1>

    Another small project with django/Ajax/Mysql/Highcharts. 看下效果图  - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...

  2. django ajax练习

    这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...

  3. 关于Django Ajax CSRF 认证

    CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...

  4. django ajax增 删 改 查

    具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...

  5. python学习-- Django Ajax CSRF 认证

    使用 jQuery 的 ajax 或者 post 之前 加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...

  6. django ajax 及批量插入数据 分页器

    ``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...

  7. Django——Ajax

    1.Ajax简介 AJAX(Asynchronous Javascript And XML)--"异步的JavaScript与XML". Ajax使用Javascript语言与服务 ...

  8. django ajax提交form表单数据

    后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...

  9. Django ajax提交 登录

    一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...

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

随机推荐

  1. ASP.NET Core分布式项目-1.IdentityServer4登录中心

    源码下载 一.添加服务端的api 1.添加NUGet包 IdentityServer4 点击下载,重新生成 2.添加Startup配置 打开Startup文件 public class Startup ...

  2. Skip List（跳跃表）原理详解与实现

    ref : https://dsqiu.iteye.com/blog/1705530   本文内容框架: §1 Skip List 介绍 §2 Skip List 定义以及构造步骤   §3 Skip ...

  3. pycharm使用pylint

    # 与能查到的多数博文做法不太一样,自认为这样更简单有效 1. 下载插件 https://plugins.jetbrains.com/plugin/11084-pylint 2. 从磁盘安装插件 注意 ...

  4. （二）ActiveMQ之点对点消息实现

    一.点对点消息实现概念 在点对点或队列模型下,一个生产者向一个特定的队列发布消息,一个消费者从该队列中读取消息.这里,生产者知道消费者的队列,并直接将消息发送到消费者的队列.这种模式被概括为:只有一个 ...

  5. Abp 领域事件简单实践 <二>

    上一篇说的是仓储增删改 的时候会自动触发领域事件. 其实也可以随时触发. 现在在应用层触发. 应用层依赖注入 EventBus public void Trigger() { var e = new ...

  6. 移动端适配flexible.js

    npm install lib-flexible --save npm install px2rem-loader --save-dev

  7. react请求接口数据是在componentDidMount 还是componentWillMount周期好

    如果你要获取外部数据并加载到组件上,只能在组件"已经"挂载到真实的网页上才能作这事情,其它情况你是加载不到组件的.componentDidMount方法中的代码,是在组件已经完全挂 ...

  8. Java程序员如何从码农晋升为架构师，你跟架构师的差别在哪里？

    一.如何定义架构师 Java架构师,首先要是一个Java程序员,熟练使用各种框架,并知道它们实现的原理.jvm虚拟机原理.调优,懂得jvm能让你写出性能更好的代码;池技术,什么对象池,怎么解决并发量. ...

  9. 用python在屏幕上输出一个杨辉三角

    在屏幕上输出一个杨辉三角,代码如下 def yanghui(): L = [1] while True: yield L L.append(0) L = [L[i - 1] + L[i] for i ...

  10. Computer Vision_33_SIFT：Remote Sensing Image Registration With Modified SIFT and Enhanced Feature Matching——2017

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...