参考博文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具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...

随机推荐

ionic 编写自定义控件
创建组件在项目所在目录下执行: ionic g component <ComponentName> 在src/components中会出现: --components |--Compon ...
【跟着stackoverflow学Pandas】 - Adding new column to existing DataFrame in Python pandas - Pandas 添加列
最近做一个系列博客,跟着stackoverflow学Pandas. 以 pandas作为关键词,在stackoverflow中进行搜索,随后安照 votes 数目进行排序: https://stack ...
python3：xlrd、xlwt、xlutils处理excel文件
1.xlrd读取excel 请参考上篇博客https://www.cnblogs.com/shapeL/p/9075843.html 2.xlwt生成excel 安装下载:pip install xl ...
Mac下百度网盘破解
Mac版百度网盘破解先下载正版的百度网盘打开终端输入命令 cd ~/Downloads && git clone https://github.com/CodeTips/Baid ...
（8）propetry装饰器
propetry是一个内置函数,用来将一个功能伪装成一个数据属性 property将一个方法伪装成一个数据属性class People: def __init__(self,name,height,w ...
【知识笔记】Debugging
一.启动调试出现无法启动程序当前状态中是非法 VS工具--选项--调试--常规--启用asp.net的JavaScript调试(chrome和ie)去掉勾选二.web.config中<cu ...
MySQL命令行--导入导出数据库
MySQL命令行导出数据库: 1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录如我输入的命令行:cd C:\Program Files\MySQL\MySQL Se ...
js object对象赋值bug和对象复制clone方法
最近在写程序的时候发现,如果新建一个object对象objb,初始化值为obja,如果改变了objb对象的字段值,那么obja也会随之改变,看来对象赋值传递的是一个引用. 代码重现: <scri ...
JZ2440 裸机驱动第8章 NAND Flash控制器
本章目标了解NAND Flash 芯片的接口掌握通过NAND Flash控制器访问NAND Flash的方法 8.1 NAND Flash介绍和NAND Flash控制器使用 NAND ...
【python】python GUI开发框架介绍
Python GUI开发的库不少.最常用的的也就几个. Tkinter -Tk是Python自带的GUI库, 上手简单, 做个简单界面基本够用了,但是不够美观,功能不全面. wxPython -开源免 ...

django框架ajax