zoukankan      html  css  js  c++  java
  • Django与AJAX

    AJAX简介

    AJAX中文就是“异步的Javascript和XML”。即使用JavaScript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据本仅仅时XML)

    AJAX不是新的编程语言,而是一种现有的标准新方法

    AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行

      同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;

      异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求

    下面举个AJAX应用小示例:

    页面输入两个整数,通过AJAX传输到后端计算并返回结果局部刷新。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <input type="text" id="i1">+<input type="text" id="i2"> = <input type="text" id="i3">
    <input type="submit" id="i4">
    
    <script>
        $("#i4").on('click',function () {
            $.ajax(
                {
                    url:'',
                    type: 'post',
                    data:{'i1':$('#i1').val(),'i2':$('#i2').val()},
                    success:function (data) {
                        $('#i3').val(data)
                    }
                }
            )
        })
    </script>
    </body>
    
    </html>
    HTML
    from django.shortcuts import render,HttpResponse
    
    # Create your views here.
    
    def index(request):
        if request.is_ajax():
            if request.method == 'POST':
                i1 = request.POST.get('i1')
                i2 = request.POST.get('i2')
                res = int(i1)+int(i2)
                return HttpResponse(res)
        return render(request,'index.html')
    views.py

    AJAX优点:

      1.AJAX使用JavaScript技术向服务器发送异步请求。

      2.AJAX请求无需刷新整个页面

      3.因为服务器相应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高。

      4.两个关键点:1.局部刷新 2.异步请求

    contentType前后端传输数据编码格式(******)

    前后端传输数据编码格式:

      1.urlencoded

      2.formdata

      3.json

    下面我们研究两个 一个是 form表单  另一个是 ajax提交数据

    form表单

      默认使用的编码格式是urlencoded

         数据格式:      

         django后端针对urlencoded编码格式的数据会自动解析并放到request.POST中供用户获取

      可以修改为formdata传文件

        django后端针对只要是符合urlenocded编码格式的数据(name=jason&pwd=123)都会自动解析并放到request.POST中供用户获取

        如果是文件 只要你指定的编码是formdata 就会自动解析并放到request.FILES

        总结:前后端传输数据的时候,一定要保证数据格式和你的编码格式是一致的 

    ajax提交数据

    ajax默认数据提交方式也是urlencoded

    ajax发送json格式数据

     django后端针对json格式的数据,并不会自动解析放到request.POST或者request.FILES里面

     它并不会解析json格式数据 而是将它原封不动的放在request.body中了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <input type="text" id="i1" name="name">
    <input type="text" id="i2" name="password">
    <input type="text" id="i3">
    <input type="file" name="myfile">
    <input type="submit" id="i4">
    {#<form action="" method="post" enctype="multipart/form-data">#}
    {#    <input type="text" id="" name="name">#}
    {#    <input type="text" id="" name="password">#}
    {#    <input type="file" name="myfile">#}
    {#    <input type="submit">#}
    {#</form>#}
    
    <script>
        $("#i4").on('click',function () {
            $.ajax(
                {
                    url:'',
                    type: 'post',
                    data:JSON.stringify({'name':'jason','password':123}),
                    contentType:'application/json',
                    success:function (data) {
                       $('#i3').val(data)
                    }
                }
            )
        })
    </script>
    </body>
    
    </html>
    JSON传输

    ajax传输文件

     ajax传输文件 建议使用内置对象formdata   var formdata = new FormData()

     formdata既可以传普通的键值对,也可以传文件

      传文件标签所存储的文件对象固定语法:

        1.先使用jQuery查找到存储文件的input标签

        2.将jQuery查找到存储文件的Input标签

        3.利用原生js对象的方法 .files[0]获取到标签内部存储的文件对象

        4.一定要指定两个参数都为false  processData:false    contentType:false 

    $('#b1').on('click',function () {
                        // ajax传输文件 建议使用内置对象formdata
                        var formData = new FormData();  // 既可以传普通的键值对 也可以传文件
                        // 添加普通键值
                        formData.append('username','jason');
                        formData.append('password','123');
                        // 传文件
                        // 如何获取文件标签所存储的文件对象?  固定语法
                        // 1.先用jQery查找到存储文件的input标签
                        // 2.将jQuery对象转成原生js对象
                        // 3.利用原生js对象的方法 .files[0]获取到标签内部存储的文件对象
                        // 4.一定要指定两个参数都为false
                        formData.append('my_file',$('#d1')[0].files[0]);
                        $.ajax({
                            url:'',  // 控制发送给谁 不写就是朝当前地址提交
                            type:'post',  // 发送方式是post请求
                            data:formData, // 发送的数据
    
                            // ajax发送文件需要指定两个额外的参数
                            processData:false,  // 告诉前端不要处理数据
                            contentType:false,  // 不适用任何编码  因为formdata对象自身自带编码 django后端也能够识别formdata对象
    
                            success:function (data) {  // data形参用来接收异步提交的结果
                                {#alert(data)#}
                                // 将后端计算好的结果 通过DOM操作 渲染到第三个input矿中
                                $('#i3').val(data)
                            }
    
                        })
                    })
    ajax传文件

        同样后端接收用 request.POST   request.FILES

    序列化组件

    from django.core import serializers  # django自带的一个小型的序列化工具
            def reg(request):
                user_list = models.User.objects.all()
                res = serializers.serialize('json',user_list)
                return render(request,'index.html',locals())
            
            [{
                    "model": "app01.user",
                    "pk": 1,序列化组件
                    "fields": {
                        "username": "jason",
                        "age": 18,
                        "gender": 1
                    }
                }, {
                    "model": "app01.user",
                    "pk": 2,
                    "fields": {
                        "username": "tank",
                        "age": 24,
                        "gender": 3
                    }
                }, {
                    "model": "app01.user",
                    "pk": 3,
                    "fields": {
                        "username": "egon",
                        "age": 73,
                        "gender": 2
                    }
                }, {
                    "model": "app01.user",
                    "pk": 7,
                    "fields": {
                        "username": "kevin",
                        "age": 29,
                        "gender": 4
                    }
            }]
    序列化组件代码

    Sweetalert搭建页面

     <script>
            $('.del').on('click', function () {
                var $btEle = $(this);
                swal({
                        title: "Are you sure?",
                        text: "Your will not be able to recover this imaginary file!",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonClass: "btn-danger",
                        confirmButtonText: "Yes, delete it!",
                        closeOnConfirm: false
                    },
                    function () {
                        $.ajax(
                            {
                                url:'{% url 'delete_book' %}',
                                type:'post',
                                data:{'user_id':$btEle.attr('user_id')},
                                success:function (data) {
                                    if (data.code == 100){
                                        $btEle.parent().parent().remove();
                                        swal("Deleted!", "Your imaginary file has been deleted.", "success");
                                    }
                                    else {
                                        swal("删除失败","出现Bug了",'error')
                                    }
                                }
                            }
                        )
                    });
            })
        </script>

       

    万般皆下品,唯有读书高!
  • 相关阅读:
    HDU 1874 畅通工程续(dijkstra)
    HDU 2112 HDU Today (map函数,dijkstra最短路径)
    HDU 2680 Choose the best route(dijkstra)
    HDU 2066 一个人的旅行(最短路径,dijkstra)
    关于测评机,编译器,我有些话想说
    测评机的优化问题 时间控制
    CF Round410 D. Mike and distribution
    数字三角形2 (取模)
    CF Round410 C. Mike and gcd problem
    CF Round 423 D. High Load 星图(最优最简构建)
  • 原文地址:https://www.cnblogs.com/s686zhou/p/11579907.html
Copyright © 2011-2022 走看看