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找到工作的励志故事
<!-----------------------------------------------------------------------------摘自网络-------------- ...
django 浅谈索引（转）
https://blog.csdn.net/qq_37049050/article/details/80749381
ORA-16401: archivelog rejected by RFS
ORA-16401: archivelog rejected by RFS 无线出单系统邮件告警10.111.20.1 1. 报错 SYS > ! oerr ora 16041 1604 ...
Elasticsearch 介绍及应用
Elasticsearch简单介绍 Elasticsearch (ES)是一个基于Lucene构建的开源.分布式.RESTful 接口全文搜索引擎.Elasticsearch 还是一个分布式文档数据库 ...
css line-height & 图片底部间隙的处理
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里 . line-height 的学习 line-heigh ...
（十二）easyUI之表单和验证完成登录页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
【SQL Server性能优化】运用SQL Server的全文检索来提高模糊匹配的效率
原文:[SQL Server性能优化]运用SQL Server的全文检索来提高模糊匹配的效率今天去面试,这个公司的业务需要模糊查询数据,之前他们通过mongodb来存储数据,但他们说会有丢数据的问题 ...
第三代PacBio测序技术的测序原理和读长
针对PacBio单分子测序——第三代测序技术的测序原理和读长 DNA基因测序技术从上世纪70年代起,历经三代技术后,目前已发展成为一项相对成熟的生物产业.测序技术的应用也扩展到了生物.医学.制 ...
Java Web 深入分析（1）B/S架构概述
B/S结构即浏览器和服务器结构.它是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构.在这种结构下,用户工作界面是通过WWW浏览器来实现,极少部分事务逻辑在前端(Browser)实 ...
ASP.NET WEB应用程序（.network4.5）MVC Razor视图引擎2
https://www.bbsmax.com/A/gAJG67OXzZ/ 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留下来的ASP ...

Django—Ajax

Ajax-get

Ajax-post

Ajax-post-upload

Django—Ajax的更多相关文章

随机推荐

热门专题