参考博文https://www.cnblogs.com/yuanchenqi/articles/9070966.html

Ajax

简单示例：

file_put文件上传页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

</head>

<body>

<h3>简单的form</h3>

<form action="" method="post">

    用户名<input type="text" name="user">

    密码<input type="password" name="pwd">

    <input type="submit">

</form>

<h3>基于form表单的文件上传</h3>

<form action="" method="post" enctype="multipart/form-data">  上传文件必须添加：

     用户名<input type="text" name="user">

     头像  <input type="file" name="avatar">

    <input type="submit">

</form>

<h3> 基于Ajax文件上传</h3>

<form action="" method="post">

    用户名<input type="text" id="user">

    头像  <input type="file" id="avatar">

    <input type="button" class="btn" value="Ajax">

</form>

<script>

{##}

{#    $(".btn").click(function(){#}

{##}

{#        $.ajax({#}

{#            url:"",#}

{#            type:"post",#}

{#            contentType:"application/json",#}   // json数据串request.body中有数据，POST中没有数据

{#            data:JSON.stringify({#}

{#                a:1,#}

{#                b:2#}

{#            }),#}

{#            success:function(data){#}

{#                console.log(data)#}

{#            }#}

{#        })#}

{##}

{##}

{##}

{#    })#}

{#    #}

{#    $(".btn").click(function(){#}

{##}

{#        $.ajax({#}

{#            url:"",#}

{#            type:"post",#}

{#            data:{#}

{#                a:1,#}

{#                b:2#}

{#            },#}

{#            success:function(data){#}

{#                console.log(data)#}

{#            }#}

{#        })#}

{##}

{#    })#}

    // ajax上传文件

    $(".btn").click(function(){

        var formdata=new FormData();

        formdata.append("user",$("#user").val());

        formdata.append("avatar",$("#avatar")[0].files[0]);

        $.ajax({

            url:"",

            type:"post",

            contentType:false, //编码格式

            processData:false, //数据不做预处理

            data:formdata,  //因为是formdata数据所以上面添加参数contentType、processData

            success:function(data){

                console.log(data)

            }

        })

    })

</script>

</body>

</html>

index页面代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

</head>

<body>

<h2>this is Index!</h2>

<button class="Ajax">Ajax</button>

<p class="content"></p>

<hr>

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret">

<button class="cal">计算</button>

<hr>

<form>

    用户名 <input type="text" id="user">

    密码 <input type="password" id="pwd">

    <input type="button" value="submit" class="login_btn"><span class="error"></span>

</form>

<script>

    $(".Ajax").click(function () {

        //发送Ajax请求

        $.ajax({

            url: "/test_ajax/",     // 请求url

            type: "get",  // 请求方式post

            data: {a: 1, b: 2},

            success: function (data) { // 回调函数

                console.log(data);

                $(".content").html(data)

            }

        })

    });

    // Ajax计算求值

    $(".cal").click(function () {

        $.ajax({

            url: "/cal/",

            type: "post",

            data: {

                "n1": $("#num1").val(),

                "n2": $("#num2").val(),

            },

            success: function (data) {

                console.log(data);

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

            }

        })

    })

    // 登录验证

    $(".login_btn").click(function () {

        $.ajax({

            url: "/login/",

            type: "post",

            data: {

                "user": $("#user").val(),

                "pwd": $("#pwd").val(),

            },

            success: function (data) {

                console.log(data); // json字符串

                console.log(typeof data);

                var data = JSON.parse(data)// 反序列化 object {}

                console.log(data); // object

                console.log(typeof data);

                if (data.user) {

                    //location.href = "http://www.baidu.com";

                    alert("success");

                }

                else {

                    $(".error").html(data.msg).css({"color": "red", "margin-left": "10px"})

                }

            }

        })

    })

</script>

</body>

</html>

视图代码：

def index(request):

    return render(request, "index.html")

def test_ajax(request):

    print(request.GET)

    return HttpResponse("hello yuan!")

def cal(request):

    print(request.POST)

    n1 = int(request.POST.get("n1"))

    n2 = int(request.POST.get("n2"))

    ret = n1 + n2

    return HttpResponse(ret)

from app01.models import User

def login(request):

    print(request.POST)

    user = request.POST.get("user")

    pwd = request.POST.get("pwd")

    user = User.objects.filter(name=user, pwd=pwd).first()

    res = {"user": None, "msg": None}

    if user:

        res["user"] = user.name

    else:

        res["msg"] = "username or passwor wrong! "

    import json

    return HttpResponse(json.dumps(res))

路由：

urlpatterns = [

    path('admin/', admin.site.urls),

    path('index/', views.index),

    path('test_ajax/', views.test_ajax),

    path('cal/', views.cal),

    path('login/', views.login),

    path('file_put/', views.file_put),

]

Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

场景：表单注册

优点：

AJAX使用Javascript技术向服务器发送异步请求
AJAX无须刷新整个页面

基于jquery的Ajax实现

<button class="send_Ajax">send_Ajax</button>

<script>

       $(".send_Ajax").click(function(){

           $.ajax({

               url:"/handle_Ajax/",

               type:"POST",

               data:{username:"Yuan",password:123},

               success:function(data){

                   console.log(data)

               },

         　　　　　　

               error: function (jqXHR, textStatus, err) {

                        console.log(arguments);

                    },

               complete: function (jqXHR, textStatus) {

                        console.log(textStatus);

                },

               statusCode: {

                    '': function (jqXHR, textStatus, err) {

                          console.log(arguments);

                     },

                    '': function (jqXHR, textStatus, err) {

                        console.log(arguments);

                    }

                }

           })

       })

</script>

案例

1 用户名是否已被注册

在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！

2 基于Ajax进行登录验证

用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息。

基于Ajax的文件上传

实例代码：

ajax+form模板：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

</head>

<body>

<h3>简单的form</h3>

<form action="" method="post">

    用户名<input type="text" name="user">

    密码<input type="password" name="pwd">

    <input type="submit">

</form>

<h3>基于form表单的文件上传</h3>

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

     用户名<input type="text" name="user">

     头像  <input type="file" name="avatar">

    <input type="submit">

</form>

<h3> 基于Ajax文件上传</h3>

<form action="" method="post">

    用户名<input type="text" id="user">

    头像  <input type="file" id="avatar">

    <input type="button" class="btn" value="Ajax">

</form>

<script>

{##}

{#    $(".btn").click(function(){#}

{##}

{#        $.ajax({#}

{#            url:"",#}

{#            type:"post",#}

{#            contentType:"application/json",#}

{#            data:JSON.stringify({#}

{#                a:1,#}

{#                b:2#}

{#            }),#}

{#            success:function(data){#}

{#                console.log(data)#}

{#            }#}

{#        })#}

{##}

{##}

{##}

{#    })#}

{#    #}

{#    $(".btn").click(function(){#}

{##}

{#        $.ajax({#}

{#            url:"",#}

{#            type:"post",#}

{#            data:{#}

{#                a:1,#}

{#                b:2#}

{#            },#}

{#            success:function(data){#}

{#                console.log(data)#}

{#            }#}

{#        })#}

{##}

{#    })#}

    // ajax上传文件

    $(".btn").click(function(){

        var formdata=new FormData();

        formdata.append("user",$("#user").val());

        formdata.append("avatar",$("#avatar")[0].files[0]);

        $.ajax({

            url:"",

            type:"post",

            contentType:false,

            processData:false,

            data:formdata,

            success:function(data){

                console.log(data)

            }

        })

    })

</script>

</body>

</html>

视图：

def file_put(request):

    if request.method == "POST":

        print("body", request.body)  # 请求报文中的请求体

        print("POST", request.POST)  # if contentType==urlencoded ,request.POST才有数据

        print(request.FILES)

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

        with open(file_obj.name, "wb") as f:

            for line in file_obj:

                f.write(line)

        return HttpResponse("OK")

    return render(request, "file_put.html")

'''

请求首行

请求头

...

ContentType:json    #urlencoed

请求体 {"a":"1","b":"2"}            #a=1&b=2&c=3

'''

ajax模板

<form>

      用户名 <input type="text" id="user">

      头像 <input type="file" id="avatar">

     <input type="button" id="ajax-submit" value="ajax-submit">

</form>

<script>

    $("#ajax-submit").click(function(){

        var formdata=new FormData();

        formdata.append("user",$("#user").val());

        formdata.append("avatar_img",$("#avatar")[0].files[0]);

        $.ajax({

            url:"",

            type:"post",

            data:formdata,

            processData: false ,    // 不处理数据

            contentType: false,    // 不设置内容类型

            success:function(data){

                console.log(data)

            }

        })

    })

</script>

视图

def index(request):

    if request.is_ajax():

        print(request.body)   # 原始的请求体数据

        print(request.GET)    # GET请求数据

        print(request.POST)   # POST请求数据

        print(request.FILES)  # 上传的文件数据

        return HttpResponse("ok")

    return render(request,"index.html")

检查浏览器的请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT

django框架ajax的更多相关文章

[oldboy-django][1初始django]web框架本质 + django框架 + ajax
web框架本质浏览器(socket客户端) - 发送请求(ip和端口,url http://www.baidu.com:80/index/) - GET 请求头(数据请求行的url上: Http1. ...
Django框架----Ajax
一.Ajax准备知识:json 说起json,我们大家都了解,就是python中的json模块,那么json模块具体是什么呢?那我们现在详细的来说明一下 1.json(Javascript Obie ...
Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
Python之Flask和Django框架解决跨域问题，配合附加ajax和fetch等js代码
Flask框架py解决跨域问题示例: # -*- coding: utf- -*- # by zhenghai.zhang from flask import Flask, render_templa ...
Django框架之 Form表单和Ajax上传文件
Django框架之 Form表单和Ajax上传文件浏览目录 Form表单上传文件 Ajax上传文件伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
Django框架之基于Ajax中csrf跨站请求伪造
Django框架之基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
Django框架之 Ajax
Django框架之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化一.AJA ...
Django框架09 /ajax、crsf、settings导入
Django框架09 /ajax.crsf.settings导入目录 Django框架09 /ajax.crsf.settings导入 1. ajax概述 2. ajax应用 3. ajax上传文件 ...
Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）
12.4 Cookie和Session 12.41 cookie Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...

随机推荐

HTML5的classList API优化对样式名className的操作
//添加一个class elem.classList.add(classname); //删除一个class elem.classList.remove(classname); //判断一个class ...
【转】WinForm基础
winform基础先修基础:C#语法基础和面向对象编程 1.Winform创建解决方案 2.Winform窗体 3.MessageBOx 4.Winform登录.控制软件只运行一次.回车登录 5.W ...
CTF-练习平台-WEB之计算题
四.计算题打开连接输入后发现只能输入一个数字,在火狐浏览器中按F12,打开查看器 ,如图所示修改最大长度输入答案后验证,当当当~~flag出现
CODEFORCES 340 XOR and Favorite Number 莫队模板题
原来我直接学的是假的莫队原题: Bob has a favorite number k and ai of length n. Now he asks you to answer m queries ...
day31 python学习操作系统的介绍，
一背景知识顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所 ...
hasura graphql server event trigger 试用
hasura graphql server 是一个很不错的graphql 引擎,当前版本已经支持event triiger 了使用此功能我们可以方便的集成webhook功能,实现灵活,稳定,快捷的消 ...
使用gitblit搭建一个简单的局域网服务器
使用gitblit搭建一个简单的局域网服务器 1.使用背景现在很多使用github管理代码,但是github需要互联网的支持,而且私有的git库需要收费.有一些项目的代码不能外泄,所以,搭建一个局域 ...
MySQL数据库函数
一:字符串函数: 1.concat(); concat(S1,S2,S3,......Sn); 把传入参数链接成一个字符串; 2.insert(); insert(str,x,y,insert); ...
Python的数据库连接池DBUtils
DBUtils是Python的一个用于实现数据库连接池的模块. 此连接池有两种连接模式: 模式一:为每个线程创建一个连接,线程即使调用了close方法,也不会关闭,只是把连接重新放到连接池,供自己线程 ...
mysql联表查询
2.1 内连接 select a.*,b.* FROM a INNER join b ON a.id = b.id; 查出所有或者 select a.*,b.* FROM a join b ...

django框架ajax