最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

世界快报:Django框架：9、Ajax简介、基本语法、数据编码格式、携带文件数据

来源：博客园

Django数据库

目录
  • Django数据库
  • 一、Ajax
    • 1、Ajax简介
    • 2、应用场景
    • 3、Ajax优点
    • 4、Ajax基本语法
    • 5、数据编码格式（Content-Type）
    • 6、Ajax携带文件数据

一、Ajax

1、Ajax简介

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

​AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

​AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）


(相关资料图)

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

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

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

须知：

​ajax不是一门新的技术并且有很多版本 我们目前学习的是jQuery版本(版本无所谓 本质一样就可以

2、应用场景

​搜索引擎根据用户输入的关键字，自动提示检索关键字（不需要提交，在页面不刷新的情况下）。

​还有一个很重要的应用场景就是注册时候的用户名的查重。

​其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

  • 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
  • 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

  • 整个过程中页面没有刷新，只是局部刷新了；
  • 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

3、Ajax优点

  • AJAX使用JavaScript技术向服务器发送异步请求；
  • AJAX请求无须刷新整个页面；
  • 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
  • 两个关键点:
    • 1.局部刷新
    • 2.异步请求

4、Ajax基本语法

基于Jquery语法

$.ajax({    url:"",                  // 后端地址 三种填写方式 与form标签的action一致    type:"post",               // 请求方式 默认也是get    data:{"v1":v1Val, "v2":v2Val},   // 发送的数据    success:function (args) {      // 后端返回结果之后自动触发 args接收后端返回的数据                            $("#d3").val(args)                      }})

jQuery发送AJAX请求示例：

        Title        
用户名已存在
<script src="/static/jquery-3.3.1.min.js"></script>{#下面这一项是基于jQuery的基础上自动给我们的每一个ajax绑定一个请求头信息，类似于form表单提交post数据必须要有的csrf_token一样#}{#否则我的Django中间件里面的校验csrf_token那一项会认为你这个请求不是合法的，阻止你的请求#}<script src="/static/setup_Ajax.js"></script><script>    //给input框绑定一个失去焦点的事件    $(".user").blur(function () {        //$.ajax为固定用法，表示启用ajax        $.ajax({            //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交            url:"",            //type为标定你这个ajax请求的方法            type:"POST",            //data后面跟的就是你提交给后端的数据            data:{"username":$(this).val()},            //success为回调函数，参数data即后端给你返回的数据            success:function (data) {                ret=JSON.parse(data);                if (ret["flag"]){                    $("p>span").removeClass("hide");                }            }        })    });</script>

5、数据编码格式（Content-Type）

​在django中，针对前后端传输数据的编码格式，我们主要研究的是post请求；因为get请求传输的数据往往是直接放在url的后面的！如：

url？username=zhang&passsword=123

​研究post请求传输数据的编码格式时，我们需要先了解，可以朝后端发送post请求的方式有哪些？？

1.form表单中的method可以发送post请求2.ajax中type可以指定post请求

前后端传输数据的编码格式有：

1.urlencoded2.formdata3.json

针对能够发post请求的form表单和ajax，我们先来研究一下form表单:

​form表单能够指定数据传输的编码格式只有两种，分别是默认urlencoded 和在form表单里指定enctype="multipart/form-data"的formdata格式，无法发送json格式数据

知识拓展

django针对contentType为urlencoded的编码格式，会自动帮你解析封装到request.POST中，所有我们才能在后端通过request.POST.get的方式进行获取前端传来的数据。针对contenType为formdata的编码格式，前端传输过来的普通键值对还是会被封装到request.POST中，对于文件则解析封装到request.FILES中！

编码格式介绍

  • urlencoded

    • form和Ajax默认的编码类型
    • 数据格式：xxx=yyy&uuu=ooo&aaa=kkk
    • django后端会自动处理到request.POST中

  • formdata

    • 即multipart/form-data，具体知识点参考request对象获取文件
    • django后端针对普通的键值对还是处理到request.POST中
    • 针对文件会处理到request.FILES中

  • application/json

    • form表单不支持，ajax可以
    • 使用ajax的时候网页返回的数据就只会被ajax接收，我们就不能设置网页跳转（视图函数的返回值无法返回网页和重定向）。

模拟Ajax发送数据

# html页面                <script>    $("#d1").click(function () {        $.ajax({            url:"",            type:"post",            data:JSON.stringify({"name":"Like", "pwd":123}),    // 必须json格式。传输数据的时候千万不要骗代码，代码没有这么聪明，如果我们把这里的数据值换成字典就会报错。            contentType:"application/json", // 要制定模式 默认Urlencoded            success:function (args) {                }        })    })        </script>        # python视图层    views    def ajaxjson(request):        if request.is_ajax():   # 判断当前是不是ajax请求专门的方法            if request.method == "POST":                print(request.POST)     #                 print(request.FILES)    #                 """Django后端针对json格式数据处理不了 会放在request.body里面"""                print(request.body)     # b"{"name":"Like","pwd":123}"                """Django它不会去处理需要我们自己去处理"""                json_bytes = request.body                import json                json_dict = json.loads(json_bytes)# Json解码                print(json_dict, type(json_dict))                return render(request, "ajaxjson.html")

6、Ajax携带文件数据

html<script>    $("#d3").click(function () {        // 1.先产生一个FormData对象        let myFormDataObj = new FormData();        // 2.往该对象中添加普通数据        myFormDataObj.append("name", "jason");        myFormDataObj.append("age", 18);        // 3.往该对象中添加文件数据        myFormDataObj.append("file", $("#d2")[0].files[0])        // 4.发送ajax请求        $.ajax({            url:"",            type:"post",            data:myFormDataObj,            // ajax发送文件固定的两个配置            contentType:false,            processData:false,            success:function (args){                alert(args)            }        })    })</script>viewsdef ab_ajax_func(request):    if request.method == "POST":        print(request.POST)        print(request.FILES)        这里就可以看到文件的数据了    return render(request, "abAjaxPage.html")

关键词： 编码格式 数据编码 文件数据