zoukankan      html  css  js  c++  java
  • Ajax

    一、简介:

      1、异步提交,局部刷新:可以动态且实时捕捉前端的输入同时反馈给后端进行逻辑处理后再展示到前端,并且这种展示是局部页面的刷新,不会跳转或重置url。

      2、Ajax不是某种独立的语言格式,只是现有方法的一种使用技巧。

      3、Ajax最大的用途就是能够在不重载页面的情况下,可以与服务器进行数据交互并实时更新页面的部分内容。

      4、原生的JS语法以及大部分衍生的框架都可以使用Ajax机制,以jQuery为例,可以直接使用jQuery的语法实现Ajax,所以使用前需要先导入jQuery模块。

      5、之前通过url或form表单发送的get或post请求,也可以通过Ajax发送。

      6、后端可以通过,request.is_ajax(),来判断是否是ajax请求。

      7、Ajax的基本形式:

        ①templates:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        {% load static %}
        <link rel="stylesheet" href="{% static 'Bootstrap337/css/bootstrap.min.css' %}">
        <script src="{% static 'Bootstrap337/js/bootstrap.min.js' %}"></script>
        <script src="{% static 'jQuery351.js' %}"></script>
    </head>
    <body>
    即将显示后端传来的内容:<input type="text" value="" id="d1">
    <input type="submit" value="点击显示" id="d2">
    </body>
    <script>
        let $d1Ele = $('#d1')
        let $d2Ele = $('#d2')
        $d2Ele.on('click',function () {
            $.ajax({  // 向后端发ajax请求
                url:'',  // 声明向哪个url对应的视图函数发请求,不写还是自身
                type:'post', // 声明请求方式,不写就是默认 get
                data:{'name':'tom', 'age':18},  // 发给后端的数据
                success:function (args) {  // 定义回调函数,一旦后端反馈结果则触发该函数的执行
                    $d1Ele.val(args)
                }
            })
        })
    </script>
    </html>

        ②views.py:

    def xxx(request):
        if request.method == 'POST':
            name = request.POST.get('name')
            age = request.POST.get('age')
            info = '姓名是{},年龄是{}'.format(name, str(age))
            return HttpResponse(info)
        return render(request, 'xxx.html')

      7、Ajax与JSON:

        ①如果后端是用的是JsonResponse返回的数据,Ajax的回调函数会自动反序列化成对象。

        ②如果后端是用HttpResponse返回的数据,Ajax的回调函数不会自动反序列化,还是JSON格式的字符串。

        ③实现HttpResponse反序列化的两种方式:

          a、前端拿到数据后,再用JSON.parse()。

          b、在Ajax请求内加个参数dataType:'json'。

    二、以post请求为例,Ajax与form表单发送不同格式数据的区别

      1、默认格式:Ajax与form表单在默认格式下发送数据的方式是一样的。

        ①默认urlencoded编码。

        ②前端发送的所有符合urlencoded编码的数据都会以,键1=值1&键2=值2&...,的形式封装在后端的request.POST中。

      2、json格式:form表单无法发送json格式数据。

        ②ajax请求中需要设置的参数:

          data:JSON.stringify({'name': 'tom', 'age': 18}) --- 序列化。

          contentType:'application/json' --- 指定编码格式。

        ③注意:指定了json编码格式,发送的数据一定也要序列化成json格式。

        ④后端获取数据:

          json_bytes = request.body --- 从body中获取,二进制格式。

          json_dict = json.loads(json_bytes) --- json.loads()会自动解码再反序列化。

      3、文件格式:

        ①form表单:enctype='form_data'。

        ②from表单发送的数据,其中普通键值对数据还是封装在后端的request.POST中,而且文件数据则封装在request.FILES中。

        ③在触发post请求的事件绑定的函数中书写:

          let form_date_obj = new FormData() --- 新建一个FormData()对象用于存储之后要发送的数据。

          form_date_obj .append('name',$('#d1').val()) --- 在FormData()对象中添加普通键值对。

          form_date_obj .append('send_file',$('#d2')[0].files[0]) --- 添加文件对象。

        ④ajax请求中需要设置的参数:

          data:form_date_obj --- 放入FormData()对象。

          contentType:false --- 不设置任何编码格式,后端可以自动识别FormData()对象。

          processData:false --- 告诉浏览器不要对该数据进行任何额外操作。

        ⑤FormData()对象中的数据,其中普通键值对数据还是封装在后端的request.POST中,而且文件数据则封装在request.FILES中。

    三、Ajax自带的序列化组件

      1、需要导入的模块:

    from django.core import serializers

      2、基本语句:

    def xxx(request):
        user_set = models.User.objects.all()
        res = serializers.serialize('json',user_set)  # 自动完善原信息,并且自动序列化为json格式
        return HttpResponse(res)

    四、批量插入:若需要给前端一次插入大量数据时,可以使用orm提供的批量捆绑再整体插入的方法大大提高渲染效率。

      1、基本语句:

    def xxx(request):
        book_list = []
        for i in range(100000):
        book_obj = models.Book(title='第%s本书'%i)
        book_list.append(book_obj)
        models.Book.objects.bulk_create(book_list)  # 打包成批量插入的对象
        return render(request,'xxxl.html',locals())
  • 相关阅读:
    147-SpirngBoot指定编译那个文件的xml文件?
    146-springboot打war包设置
    145-sprinboot导入的内嵌jsp依赖是什么?
    mybatis中映射文件和实体类的关联性
    Quartz使用-入门使用(java定时任务实现)
    java SSLContext
    方法参数传递
    JSP写的图书管理系统
    JAVA---数组
    SpringBoot 2.x 后WebMvcConfigurationAdapter 过时
  • 原文地址:https://www.cnblogs.com/caoyu080202201/p/13035042.html
Copyright © 2011-2022 走看看