首页 > 其他分享 >Ajax简述---快速增量式响应

Ajax简述---快速增量式响应

时间:2023-06-26 18:23:05浏览次数:46  
标签:简述 json request ajax django --- Ajax 序列化 数据

目录

Ajax

Ajax的简介及用法

Ajax是指异步JS和XML,使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。

Ajax有很多版本,这里介绍的是jQuery版本的:

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

后端依旧需要按照响应HttpResponse对象。

参数 含义
url 发送请求给这个网址 ""|"/路由"|"完整网址"
type 请求方式,默认get 有除get、post外的其他方式
contentType 数据编码格式 默认urlencoded,后续又详细讲解
data 提交给后端的数据 根据不同的content-type数据形式也不同
success 当请求成功被响应时执行 异步回调函数,可以接收响应体中的数据

contentType属性

urlencoded

ajax默认的编码格式、form表单默认也是这种编码格式,数据组织格式为xxx=yyy&uuu=ooo&aaa=kkk

在请求方式为post时,django会将其处理好后存储到request.POST中,通过get、getlist取值。

formdata

django后端针对普通的键值对还是处理到request.POST中 但是针对文件会处理到request.FILES中。

application/json

这是form表单所不支持的数据编码,ajax可以传输序列化后的json数据,发送给后端,并且不做处理,放在request.body中。后端每个语言都有自己的处理方式。

携带文件数据设置

携带文件数据,contentType属性需要设置为false,直接传入FormData对象。

通过这种方式提交的普通数据依旧在POST中,文件数据在FILES中。

<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>

数据交互格式

我们很多时候后端与前端的交流并不随便的发送各种形式的字符串,所以对于success后回调函数所接收的参数,我们一般要求是json格式的数据,并且大多是一个大字典的格式,其中可能嵌套多个字典(对应js中的自定义对象)。

那么django后端的视图函数针对ajax请求,是可以做一些识别的,针对ajax请求,django也会有些针对性的操作。

  1. request.is_ajax()

    request对象判断是否是ajax请求并返回bool

  2. 在视图函数的return的httpResponse对象只会局部的影响界面,最终效果由回调函数决定

  3. 在应对ajax请求,我们应该在视图函数中判断,如果是ajax请求,就包装一些字典数据并通过json响应,将数据发送给回调函数的参数。

def index(request):
    if request.is_ajax():
        from django.http import JsonResponse
        return JsonResponse({组织好的字典})
    return render(request,"html文件")

ps:我们通过json响应返回的数据除了将我们的字典序列化,还可以告知前端,这个数据不需要这个是json数据,放心反序列化,前端就会自动的反序列化,作为前端工程师就可以直接使用了。*

django内置序列化组件(drf前身)

我们已经知道前后端分离的项目,其前后端的数据交互通常是通过json格式数据,而django中我们所取出的数据列表却是QuerySet形式的,如果不通过模板语法,我们是没有办法直接在前端页面使用的。

我们当然可以自己进行写循环代码,拿出所有的字段的数据将其转换成字典。但是这么机械重复的事情,肯定已经被解决了,我们可以直接用django提供的内置序列化组件就可以将queryset对象封装为字典。

# 导入内置序列化模块
from django.core import serializers
# 调用该模块下的方法,第一个参数是你想以什么样的方式序列化你的数据
res = serializers.serialize('json', book_queryset)
return HttpResponse(res)

标签:简述,json,request,ajax,django,---,Ajax,序列化,数据
From: https://www.cnblogs.com/wxlxl/p/17506438.html

相关文章

  • 热水壶语音方案,NV040C-8S语音芯片-让您的热水壶变得更智能
    随着智能家居的兴起,越来越多的家用电器开始智能化,为现代人带来更加便捷和高效的生活体验。作为家庭必备的热水器也不例外,目前市场上已经出现了很多能够智能化的热水器品牌。作为一款语音播报芯片,九芯电子的NV040C-8S集成了先进的数字语音处理技术,通过高质量的声音解码器,能够准确......
  • 记录--巧用 overflow-scroll 实现丝滑轮播图
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言:近期我在项目中就接到了一个完成轮播图组件的需求。最开始我也像大家一样,直接选择使用了知名的开源项目"Swiper",但是后来发现它在移动端项目中某些测试环境下会白屏一段时间。无论如何调试都不能修复这个问......
  • FIO的再学习-不同Raid,不同磁盘性能验证
    FIO的再学习-不同Raid性能验证背景发现自己对iodepth的和num_jobs的理解存在偏差找了一些资料才发现自己很多地方做的不对.这里找到一个新资料可以进行模拟数据库的测试测试配置文件#R/W:8/2#ThreadPoolNum:64#IOThreadNum:32[global]runtime=120time_b......
  • docker-compose管理容器
    docker-compose管理容器一、下载docker-compose1.下载依赖执行命令:curl-Lhttps://get.daocloud.io/docker/compose/releases/download/1.26.2/docker-compose-`uname-s`-`uname-m`>/usr/local/bin/docker-compose2.给下载目录授予权限chomod777/usr/local/bin/docker-com......
  • 正则表达式-01
     这是一段正则表达式示例,筛选出sql语句里面用到的表。 #!/usr/bin/envpython#-*-coding:utf-8-*-importretext1="""T2.NOTI_CONTasEVENT_INFO--事件内容FROM(SELECT*FROMBOND_BASIC_INFOfinalWHEREISVALID=1)T1--债券基本......
  • 生活反思随笔 2023.6 -
    [1]当投身于漫长的事业时,我们需要信心之源泉来维持内心的平静,因此我们能好好地坚持下去。当信心的来源来自于亲友时,我们心怀感激。当独自上路时,我们时常锻炼我们自信之肌肉,并对我们的自信心怀感激。[2]“德智体美劳”这个小时候常听到的五个综合的个人修养评价指标,实际放到成......
  • 一个使用simulink搭建的三通道交错并联双向buck-boost变换器。它采用电压外环、三电流
    这是一个使用simulink搭建的三通道交错并联双向buck-boost变换器。它采用电压外环、三电流内环和载波移相120°的控制方式。该变换器在buck模式和boost模式之间切换时,能够实现能量的双向流动,而且不会产生过压和过流问题。交错并联的拓扑结构可以减少电感电流的纹波,减小每相电感的体......
  • 7. JPA - Hibernate【从零开始学Spring Boot】
      在说具体如何在springboot使用Hibernate前,先抛装引玉些知识点?什么是JPA呢?JPA全称JavaPersistenceAPI.JPA通过JDK5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中。http://baike.baidu.com/link?url=LdqIXvzTr0RDjY2yoRdpogDdzaZ_L-DrIOpLLzK1z38......
  • 最高法-索赔单有对方当事人签字但附件无签字的,附件中记载的情况不应当视为满足民诉法
    (2016)最高法民再26号  珠海市建筑工程有限公司与珠海市铭豪居房产有限公司建设工程施工合同纠纷申诉、申请民事判决书再审法院认为:再审过程中,珠海建筑公司与铭豪居公司就应付工程款数额计算的争议体现在两个方面,分别分析如下:1.关于《索赔表一》中的8096873.74元和《索赔表......
  • TVS二极管DW05-4R3P-S 保护GPIO端口免受ESD静电威胁
    General-purposeInputOutput,中文:通用输入/输出端口,简称GPIO或总线扩展器。GPIO端口能够提供额外的控制和监视功能,每个GPIO端口可通过软件分别配置成输入或输出,由于其可能需要引线至外部传输数据,极其容易受到ESD静电放电及其他电磁脉冲浪涌的影响,为产品的稳定性和可靠性带来挑战......