Django回顾 - 6 Ajax

【1】Ajax

定义:

        异步Javscript和XML

 

作用:

        Javascript语言与服务器(django)进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)

 

同步交互和异步交互:

        1、同步交互:js发送出请求---》直到请求回来---》页面不能操作,不能点击

        2、异步交互:js发出请求---》等待请求回来的过程中--->页面可以随意继续操作

        【1.1】Ajax使用

4 、使用:使用了jquery帮咱们封装的方法  ajax ,名字跟ajax相同 -------- $.ajax

 

5、真正的ajax原生,需要使用js操作,jq的ajax方法是对原生js的封装,方便咱们使用
    -前后端混合项目中,我们通常使用jquery的ajax实现 js和后端异步交互
        -jquery操作DOM
        -jquery发ajax请求
    -前后端分离项目中,我们会使用另一个第三方库(axios),实现 js和后端异步交互
        -只想发送ajax请求---》只用来发ajax请求的库

        【1.2】编码格式

  • 默认编码格式
    • urlencode
  • 文件上传编码格式
    • form-data
  • json编码格式
    • application/json

        【1.3】Ajax上传文件

<input type='file' name='my_file' id="files"> <button id="id_btn">提交</button>$('#id_btn').click(function(){var formdata = new FormData()formdata.append('files',$('#files')[0].files[0])$.ajax({url:'',type:'post',data:formdata,contentType:false, //告诉jQuery不要去处理发送的数据processData:false, // 告诉jQuery不要去设置Content-Type请求头success:function(){}})
})'''
Ajax上传文件格式的数据必须使用FormData函数,因为文件上传的编码格式为form-datacontentType设置为false
processData设置为false'''

        【1.4】Ajax上传json格式的数据

	      $.ajax({url: '/demo01/',method: 'post',contentType: 'application/json',data: JSON.stringify({name: 'lqz', age: 19}), // 把对象转成字符串形式,json格式字符串success: function (data) {console.log(data)}})

        【1.5】Ajax执行流程图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/203230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何解决syntaxerror: more than 255 arguments 报错

如何解决syntaxerror: more than 255 arguments 报错 问题背景解释解决方案 问题背景 今天拼接特征的时候&#xff0c;突然代码报错syntaxerror: more than 255 arguments &#xff0c;看了一下感觉这个报错非常有意思&#xff0c;估计平时也是没机会碰到&#xff0c;和大家分…

用Mnesia为cache增加分布式支持

一&#xff1a;分布式缓存 1.选取通信策略 在设计分布式程序时&#xff0c;可供选择的通信方式主要有两种&#xff1a;异步通信和同步通信。采用异步通信时&#xff0c;发送方无须等待任何确认或应答。而在采用同步通信时&#xff0c;发送方会处于挂起状态&#xff0c;直至收…

基于ubuntu nc指令实现远程传输文件到嵌入式设备中

背景&#xff1a; 最近在使用nc进行远程文件传输的时候发现在文件传输完成时&#xff0c;没有正确的反馈&#xff0c;而是界面一直停留在传输阶段&#xff0c;加上使用nc传输需要设置一些诸如-l、 -p等参数&#xff0c;于是想将这些参数包裹在sh脚本中&#xff0c;一键执行脚本…

原型模式(Prototype Pattern)

1 基本概念 1.1 大佬文章 设计模式是什么鬼&#xff08;原型&#xff09; 详解设计模式&#xff1a;原型模式-腾讯云开发者社区-腾讯云 1.2 知识汇总 &#xff08;1&#xff09;原型模式&#xff1a;先 new 一个实例&#xff0c;该实例符合需求&#xff0c;之后再根据这个…

Stable Diffusion AI绘画系列【17】:绘本童话风格场景

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

【南京站-EI会议征稿中】第三届网络安全、人工智能与数字经济国际学术会议(CSAIDE 2024)

第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&#xff09; 2024 3rd International Conference on Cyber Security, Artificial Intelligence and Digital Economy 第三届网络安全、人工智能与数字经济国际学术会议&#xff08;CSAIDE 2024&…

制作蓝牙小车

制作控制蓝牙小车app 想制作一个蓝牙小车&#xff0c;通过手机app程序操控小车运行&#xff0c;制作分三个部分&#xff08;app制作&#xff0c;蓝牙小车硬件制作&#xff0c;小车程序制作&#xff09;&#xff0c;先完成第一个部分app制作&#xff0c;本次app是通过androidstu…

MongoDB知识总结

这里写自定义目录标题 MongoDB基本介绍MongoDB基本操作数据库相关集合相关增删改查 MongoDB基本介绍 简单介绍 MongoDB是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产…

elasticsearch 是如何实现 master 选举的?

Elasticsearch 中的 master 选举机制主要是通过选举算法实现的。Elasticsearch 使用了 Raft 算法作为其选举算法&#xff0c;用于在集群中选举出一个 master 节点&#xff0c;以及确定新的 master 节点。 在 Elasticsearch 中&#xff0c;所有节点在启动时都会自动加入一个名为…

【Hive】——数据仓库

1.1 数仓概念 数据仓库&#xff08;data warehouse&#xff09;&#xff1a;是一个用于存储&#xff0c;分析&#xff0c;报告的数据系统 目的&#xff1a;是构建面向分析的集成化数据环境&#xff0c;分析结果为企业提供决策支持 特点&#xff1a; 数据仓库本身不产生任何数据…

Spring Boot学习随笔-SpringBoot的引言,回顾传统SSM开发

学习视频&#xff1a;【编程不良人】2021年SpringBoot最新最全教程 第一章、传统SSM开发回顾以及问题 Spring SpringMVC Mybatis SSM 实现一个简单功能 员工添加、查询… SSM项目简单实现 项目 需求分析 —>概要设计 —>&#xff08;库表设计&#xff09; —> 详细…

从零开始的c语言日记day40——字符函数和字符串函数——内存函数

常用函数介绍 求字符串长度 strlen 长度不受限制的字符串函数 Strcpy Strcat strcmp 长度受限制的字符串函数介绍 strncpy strncat strncmp 字符串查找 Strstro strtok 错误信息报告 strerror 字符操作 内存操作函数 memcpy memmove memset Memcmp 使用Asser…

C语言——二级指针

指针变量也是变量&#xff0c;是变量就有地址&#xff0c;那么指针变量的地址存放在哪里&#xff1f;——这就是二期指针 int a 10;int *pa &a;int **ppa &pa;//a的地址存放在pa中&#xff0c;pa的地址存放在ppa中。 //pa是一级指针&#xff0c;ppa是二级指针。 对…

【Taro】React+Taro项目实现页面样式兼容手机端和Pad端

前言&#xff1a; taro本身就是兼容多端的ui框架&#xff0c;是现在开发中比较常用的框架&#xff0c;兼容小程序、h5等&#xff0c;所以下面介绍下一些特殊情况的时候怎么实现样式兼容&#xff0c;在不同分辨率下 1.手机端兼容 在config/index.js配置文件中添加如下配置 desi…

数据库函数大全(更新中)

IF(expr1,expr2,expr3) SELECT IF(1<2,yes ,no);#如果 1<2 满足返回 ‘yes’ 否则 ‘no’,也可以用于修改 UPDATE salary SET sex IF(Sex m, f, m); # sex m 改为 ‘f’ , sex f 改为 ‘m’ with with xx_v1 as( sql查询语句1 ),xx_v2 as( sql查询语句2 ),xx_v…

点击el-tree小三角后去除点击后的高亮背景样式,el-tree样式修改

<div class"videoTree" v-loading"loadingTree" element-loading-text"加载中..." element-loading-spinner"el-icon-loading" element-loading-background"rgba(0, 0, 0, 0.8)" > <el-tree :default-expand-all&q…

鸿蒙4.0开发笔记之ArkTS语法基础之应用生命周期与页面中组件的生命周期(十六)

文章目录 一、应用生命周期二、生命周期函数定义三、生命周期五函数练习 一、应用生命周期 1、定义 应用生命周期就是代表了一个HarmonyOS应用中所有页面从创建、开启到销毁等过程的全生命周期。查看路径如下&#xff1a; Project/entry/src/main/ets/entryability/EntryAbili…

libevent库中的http相关函数举例

evhttp_set_cb 是一个用于设置回调函数的函数&#xff0c;该回调函数在 Libevent 的 HTTP 服务器框架 (libevent-http) 中用于处理 HTTP 请求。这个函数需要三个参数&#xff1a;一个 evhttp 实例&#xff0c;一个回调函数&#xff0c;以及一个用于传递到回调函数的 "ctx&…

SpringBoot集成Elasticsearch8.x(9)|(RestClient实现Elasticsearch的简单操作)

SpringBoot集成Elasticsearch8.x(9)|(RestClient curl实现Elasticsearch的操作) 文章目录 SpringBoot集成Elasticsearch8.x(9)|(RestClient curl实现Elasticsearch的操作)@[TOC]前言一、DSL 介绍二、初始化客户端三、封装RestClient dsl执行三、更新1.实用script更新es…

Google Guava简析

Google Guava 是Google开源的一个Java类库&#xff0c;对基本类库做了扩充。感觉最大的价值点在于其 集合类、Cache和String工具类。 github项目地址&#xff1a;GitHub - google/guava: Google core libraries for Java github文档地址&#xff1a;Home google/guava Wiki …