• Django与Ajax


    Ajax简介

    Ajax翻译成中文就是"异步Javascript和XML",即使用Javascript语言与服务器进行异步交互,传输的数据为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: {
                        '403': function (jqXHR, textStatus, err) {
                              console.log(arguments);
                         },
    
                        '400': function (jqXHR, textStatus, err) {
                            console.log(arguments);
                        }
                    }
    
               })
    
           })
    
    </script>

    案例:

    用户名是否已被注册

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

    基于Ajax进行登录验证

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

    文件上传

    请求头ContentType

    ContentType指的是请求体的编码类型,常见的类型有3中:

    1.application/x-www-form-urlencoded

    这是最常见的POST提交数据的方式了,浏览器的原生<form>表单,如果不设置enctype属性,那么最终就会以application/x-www-form-urlencoded方式提交数据,请求类似于下面这样

    POST http://www.example.com HTTP/1.1
    Content-Type:application/x-www-form-urlencoded;charset=utf-8
    
    user=abc&age=12

    2.multipart/form-data

    这也是一个常见的POST数据提交的方式,我们使用form表单上传文件时,必须让<form>表单的enctype等于multipart/form-data

    3.application/json


    application/json用来告诉服务端消息主题是序列化后的JSON字符串

     

    基于form表单的文件上传

    模板部分

    <form action="/file_put/" method="post" enctype="multipart/form-data">
        姓名<input type="text" name="user">
        文件<input type="file" name="file_obj">
        <input type="submit">
    </form>

    视图部分

    def index(request):
        print(request.body)    #原始的请求体数据
        print(request.GET)    #GET请求数据
        print(request.POST)    #POST请求数据
        print(request.FILES)    #上传的文件数据
    
        return render(request, "index.html")

    基于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(reqeust.GET)    #GET请求数据
            print(request.POST)    #POST请求数据
            print(request.FILES)    #上传的文件数据
    
            return HttpResponse("OK")
        return render(request, "index.html")
  • 相关阅读:
    Python基础篇(七)
    RMI基础
    Python基础篇(五)
    装饰模式
    一些linux知识和http知识
    mysql统计一个库里面的表的总数
    关于phpmailer邮件发送
    Jenkins是什么?
    Android开发——JVM、Dalvik以及ART的区别【转帖】
    好记性不如烂笔头--linux学习笔记9练手写个shell脚本
  • 原文地址:https://www.cnblogs.com/s593941/p/10011612.html
Copyright © 2020-2023  润新知