FLask框架AJAX操作
FLask框架-AJAX(异步JavaScript与XML) – 潘登同学的flask学习笔记
文章目录
- FLask框架-AJAX(异步JavaScript与XML) -- 潘登同学的flask学习笔记
- AJAX技术
- AJAX使用
- AJAX中GET请求参数传递
- AJAX中POST请求传递参数
- AJAX获取状态码与处理结果
- AJAXc错误处理
- AJAX封装
- AJAX封装-处理响应
- 失败处理
- 处理返回数据
- AJAX封装设置默认值
- JQuery中AJAX的使用
- JQuery中get与post
AJAX技术
AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
传统网站中存在的问题
- 网速慢的情况下,页面加载时间长,用户只能等待
- 表单提交后,如果一项内容不合格,需要重新填写所有表单内容
- 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间(分页跳转,只需要更新主要内容)
AJAX的应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单页离开焦点数据验证
- 搜索框提示文字下拉列表
- 级联显示
AJAX运行原理
AJAX使用
- 1.创建AJAX
XMLHttpRequest
对象
let xhr = new XMLHttpRequest()
- 2.设置AJAX请求地址以及请求方式,通过
XMLHttpRequest.open()
方法用于指定 HTTP 请求的参数,或者说初始化XMLHttpRequest
实例对象。它一共可以接受五个参数。
void open(string method,string url,optional boolean async,optional string user,optional string password
);
method
:表示 HTTP 动词方法,比如GET
、POST
、PUT
、DELETE
、HEAD
等。url
: 表示请求发送目标URL
。async
: 布尔值,表示请求是否为异步,默认为true
。如果设为false
,则send()
方法只有等到收到服务器返回了结果,才会进行下一步操作。该参数可选。由于同步AJAX 请求会造成浏览器失去响应,许多浏览器已经禁止在主线程使用,只允许 Worker里面使用。所以,这个参数轻易不应该设为 false 。user
:表示用于认证的用户名,默认为空字符串。该参数可选。password
:表示用于认证的密码,默认为空字符串。该参数可选。
xhr.open("GET",'http://httpbin.org/get')
3.发送请求, XMLHttpRequest.send() 方法用于实际发出 HTTP 请求。它的参数是可选的,如果不带参数,就表示 HTTP 请求只包含头信息,也就是只有一个 URL,典型例子就是 GET 请求;如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是POST 请求。
4.获取服务器端给客户端的响应数据
XMLHttpRequest
对象可以对以下事件指定监听函数XMLHttpRequest.onloadstart
:loadstart 事件(HTTP 请求发出)的监听函数XMLHttpRequest.onprogress
:progress事件(正在发送和加载数据)的监听函数XMLHttpRequest.onabort
:abort 事件(请求中止,比如用户调用了 abort() 方法)的监听函数XMLHttpRequest.onerror
:error 事件(请求失败)的监听函数XMLHttpRequest.onload
:load 事件(请求成功完成)的监听函数XMLHttpRequest.ontimeout
:timeout 事件(用户指定的时限超过了,请求还未完成)的监听函数XMLHttpRequest.onloadend
:loadend 事件(请求完成,不管成功或失败)的监听函数XMLHttpRequest.onreadystatechange
: readystatechange事件(当 readyState 属性变化)的监听函数
// resopnseText是响应文本
xhr.onload = function(){console.log(xhr.resopnseText)}
AJAX简单操作,实现动态加载页面
<body><h1>AJAX的基本使用</h1><div class='container'></div><script>// 创建AJAXlet xhr = new XMLHttpRequest();// 设置请求的参数xhr.open("GET",'http://httpbin.org/get');// 发生请求xhr.send();// 获取响应数据xhr.onload = function(){// 获取响应的文本内容content = xhr.responseText;// 输出到控制台console.log(content);// 获取div的对象container = document.querySelector(".container");// 将数据填充到div中container.innerHTML = content;}</script>
</body>
AJAX中GET请求参数传递
在get请求中,参数是拼接在url中的,所以此时可以获取到参数,拼接到url即可
<body><h1>AJAX中GET请求传参</h1><div class='container'></div><script>// 创建AJAXlet xhr = new XMLHttpRequest();// 设置urllet url = 'http://httpbin.org/get';// 拼接请求参数let args = '?uname=pd&pwd=123'url += args// 设置请求的参数xhr.open("GET", url);// 发生请求xhr.send();// 获取响应数据xhr.onload = () => {// 获取响应的文本内容content = xhr.responseText;// 获取div的对象container = document.querySelector(".container");// 将数据填充到div中container.innerHTML = content;}</script>
</body>
<body><h1>AJAX中GET请求传参</h1><input type="text" name="" id="uname"><input type="text" name="" id="pwd"><input type="button" value="获取用户名和密码" onclick='submitform()'><script>function submitform(){uname = document.getElementById('uname').valuepwd = document.getElementById('pwd').valuelet xhr = new XMLHttpRequest();let url = 'http://httpbin.org/get';let args = '?uname=' + uname + '&pwd=' + pwd;url += args;xhr.open("GET", url);xhr.send(); xhr.onload = () => {// 获取响应的文本内容content = xhr.responseText;console.log(content)}}</script>
</body>
AJAX中POST请求传递参数
AJAX使用post的请求基本一样。但在传参时,有些不同,参数应该放在body中,并通过XMLHttpRequest.setRequestHeader()
设置请求信息的格式
XMLHttpRequest.setRequestHeader()
方法用于设置浏览器发送的 HTTP 请求的头信息。该方法接受两个参数。第一个参数是字符串,表示头信息的字段名,第二个参数是字段值
注意:
XMLHttpRequest.setRequestHeader()
该方法必须在 open()
之后、 send()
之前调用。如果该方法多次调用,设定同一个字段,则每一次调用的值会被合并成一个单一的值发送
<table><tr><td>用户名:</td><td><input type="text" name="" id="uname1"></td></tr><tr><td>密码:</td><td><input type="text" name="" id="pwd1"></td></tr><tr><td><input type="button" value="传递数据-str" onclick='submitform_str()'></td><td><input type="button" value="传递数据-json"></td></tr>
</table>
<script>function submitform_str(){// 获取数据 uname1 = document.getElementById('uname1').value;pwd1 = document.getElementById('pwd1').value;// 拼接参数let args = 'uname=' + uname1 + '&pwd=' + pwd1;let xhr = new XMLHttpRequest(); xhr.open('POST','http://httpbin.org/post');// 设置请求内容的类型xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') // 在open之后,send之前xhr.send(args);xhr.onload = () =>{console.log(xhr.responseText);}}
</script>
function submitform_json(){// 获取数据 uname1 = document.getElementById('uname1').value;pwd1 = document.getElementById('pwd1').value;let args = {'uname' : uname1,'pwd' : pwd1};args = JSON.stringify(args)let xhr = new XMLHttpRequest();xhr.open('POST','http://httpbin.org/post');// 设置请求内容的类型xhr.setRequestHeader('Content-Type','application/json')xhr.send(args);xhr.onload = () =>{console.log(xhr.responseText);}}
注意
get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的
AJAX获取状态码与处理结果
我们需要判断服务器响应的数据是正确还是错误来解析数据,否则前面就会显示出错
AJAX状态码
在创建AJAX对象,配置AJAX对象,发送请求,以及接收完服务器端响应数据,这个过程中的每一个步骤都会对应一个数值,这个数据就是AJAX状态码
XMLHttpRequest.readyState
返回一个整数,表示实例对象的当前状态。该属
性只读。它可能返回以下值。
- 0:表示 XMLHttpRequest 实例已经生成,但是实例的
open()
方法还没有被调用。 - 1:表示
open()
方法已经调用,但是实例的send()
方法还没有调用,仍然可以使用实例的setRequestHeader()
方法,设定 HTTP 请求的头信息。 - 2:表示实例的
send()
方法已经调用,并且服务器返回的头信息和状态码已经收到。 - 3:表示正在接收服务器传来的数据体(body 部分)。这时,如果实例的
responseType
属性等于text
或者空字符串,responseText
属性就会包含已经收到的部分信息。 - 4:表示服务器返回的数据已经完全接收,或者本次接收已经失败。
HTTP状态码
XMLHttpRequest.status
属性返回一个整数,表示服务器回应的 HTTP 状态码。一般来说,如果通信成功的话,这个状态码是200;如果服务器没有返回状态码,那么这个属性默认是200。请求发出之前,该属性为 0 。该属性只读
在 XMLHttpRequest.onreadystatechange
事件中,我们规定当服务器响应已做好被处理的准备时,再执行任务
function get_data() {let xhr = new XMLHttpRequest();xhr.open('GET', 'https://httpbin.org/get');xhr.send();xhr.onreadystatechange = () => {// 当AJAX的状态码为4,并且http的状态码为200时if (xhr.readyState == 4) {if (xhr.status == 200) {console.log(xhr.responseText)// 转换数据类型data = JSON.parse(xhr.responseText)console.log(data)} else {// 查看异常console.log(xhr.status)}} else {console.log(xhr.readyState)}}}
服务器端响应的数据格式
在真实的项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。
在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,一般都会被转换为对象字符串进行传输
JSON.parse() //将json字符串转换为json对象
AJAXc错误处理
网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期的结果。可以判断服务器端返回的状态码,分别进行处理。 xhr.status
获取http状态码
- 网络畅通,服务器端没有接收到请求,返回404状态。检查请求地址是否错误
- 网络畅通,服务器端能接收到请求,服务器端返回500状态码
- 网络中断,请求无法发送到服务器端
在AJAX中设置一个专门处理请求失败的监听函数 XMLHttpRequest.onerror
:error 事件(请求失败)的监听函数
AJAX封装
对POST与GET方法进行封装
function AJAX1(options) {// options是一个JSON对象,// options:// type:请求的方式// url:请求的地址// data:请求的参数,类型的JSONlet xhr = new XMLHttpRequest();// 处理请求的参数let args = '?'for (let key in options.data) {args += key + '=' + options.data[key] + '&'}args = args.substr(0,args.length-1)if (options.type.toUpperCase() == "GET") {xhr.open(options.type, temp_url+args);xhr.send();} else if (options.type.toUpperCase() == "POST") {args = args.substr(1,args.length)xhr.open(options.type, options.url);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')xhr.send(args);}xhr.onreadystatechange = () => {// 当AJAX的状态码为4,并且http的状态码为200时if (xhr.readyState == 4) {if (xhr.status == 200) {data = JSON.parse(xhr.responseText)console.log(data)} else {// 查看异常console.log(xhr.status)}} else {console.log(xhr.readyState)}}xhr.onerror = () => {console.log('网络中断')}
}
运用封装好的AJAX
<input type="button" value="获取响应数据get" onclick='get_data()'>
<input type="button" value="发送请求数据post" onclick='post_data()'>
<script>function get_data() {AJAX1({type: 'get',url: 'https://httpbin.org/get',data: {uname: 'pd',pwd: '123'}})}function post_data() {AJAX1({type: 'post',url: 'https://httpbin.org/post',data: {uname: 'pd',pwd: '123'}})}
</script>
AJAX封装-处理响应
当AJAX发送了请求后,AJAX都应该回馈一个内容。这时就会分如下2个情况:
失败处理
可以通过onerror监听函数处理错误情况,
处理返回数据
请求成功能可以,通过onreadystatechange监听函数处理。以下是可以使用的属性
- XMLHttpRequest.response
XMLHttpRequest.response
属性表示服务器返回的数据体(即 HTTP 回应的 body 部分)。它可能是任何数据类型,比如字符串、对象、二进制对象等等,具体的类型由XMLHttpRequest.responseType
属性决定。该属性只读- 如果本次请求没有成功或者数据不完整,该属性等于
null
。但是,如果responseType
属性等于text
或空字符串,在请求没有结束之前(readyState
等于3的阶段),response
属性包含服务器已经返回的部分数据。
- XMLHttpRequest.responseType
XMLHttpRequest.responseType
属性是一个字符串,表示服务器返回数据的类型。这个属性是可写的,可以在调用open()
方法之后、调用send()
方法之前,设置这个属性的值,告诉服务器返回指定类型的数据。如果responseType
设为空字符串,就等同于默认值text
。
- XMLHttpRequest.responseType 属性可以等于以下值。
- ”“(空字符串):等同于
text
,表示服务器返回文本数据。 - “arraybuffer”:ArrayBuffer 对象,表示服务器返回二进制数组。
- “blob”:Blob 对象,表示服务器返回二进制对象。
- “document”:Document 对象,表示服务器返回一个文档对象。
- “json”:JSON 对象。
- “text”:字符串。
- ”“(空字符串):等同于
上面几种类型之中, text
类型适合大多数情况,而且直接处理文本也比较方便。 document
类型适合返回 HTML / XML 文档的情况,这意味着,对于那些打开 CORS 的网站,可以直接用AJAX 抓取网页,然后不用解析 HTML 字符串,直接对抓取回来的数据进行 DOM 操作。 blob 类型适合读取二进制数据,比如图片文件
- XMLHttpRequest.responseText
XMLHttpRequest.responseText
属性返回从服务器接收到的字符串,该属性为只读。只有HTTP 请求完成接收以后,该属性才会包含完整的数据
- XMLHttpRequest.responseXML
XMLHttpRequest.responseXML
属性返回从服务器接收到的 HTML 或 XML 文档对象,该属性为只读。如果本次请求没有成功,或者收到的数据不能被解析为 XML 或 HTML,该属性等于null- 该属性生效的前提是 HTTP 回应的
Content-Type
头信息等于text/xml
或application/xml
。这要求在发送请求前,XMLHttpRequest.responseType
属性要设为document
。如果 HTTP回应的Content-Type
头信息不等于text/xml
和application/xml
,但是想从responseXML
拿到数据(即把数据按照 DOM 格式解析),那么需要手动调用XMLHttpRequest.overrideMimeType()
方法,强制进行 XML 解析。
- XMLHttpRequest.responseURL
XMLHttpRequest.responseURL
属性是字符串,表示发送数据的服务器的网址
AJAX封装设置默认值
在使用AJAX时,往往需要传递多个参数。为了简化使用封装的AJAX方法,因此可以考虑给AJAX方法设置默认参数
// AJAX封装请求参数
function AJAX1(options) {// options是一个JSON对象,// options:// type:请求的方式// url:请求的地址// data:请求的参数,类型的JSON// success:请求成功以后如何处理// error:请求失败以后如何处理let defaults = {type:'GET',url:'',success:()=>{},error:()=>{}}// 合并属性 最终在第一个参数上default有完整的属性,但是第二个参数占主导地位Object.assign(defaults,options)let xhr = new XMLHttpRequest();// 处理请求的参数let args = '?'for (let key in defaults.data) {args += key + '=' + defaults.data[key] + '&'}args = args.substr(0,args.length-1)if (defaults.type.toUpperCase() == "GET") {xhr.open(defaults.type, temp_url+args);xhr.send();} else if (defaults.type.toUpperCase() == "POST") {args = args.substr(1,args.length)xhr.open(defaults.type, defaults.url);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')xhr.send(args);}// 接受响应xhr.onreadystatechange = () => {// 当AJAX的状态码为4,并且http的状态码为200时if (xhr.readyState == 4) {if (xhr.status == 200) {defaults.success(xhr.responseText)} else {// 查看异常defaults.error(xhr.status)}} else {defaults.error(xhr.readyState)}}xhr.onerror = () => {defaults.error('1000:网络中断')}
}
function get_data() {AJAX1({// type: 'get',url: 'https://httpbin.org/get',data: {uname: 'pd',pwd: '123'},success:(response)=>{console.log(response)},error:(response)=>{console.log('返回的状态码是:' + response)}})
}
function post_data() {AJAX1({type: 'post',url: 'https://httpbin.org/post',data: {uname: 'pd',pwd: '123'},success:(response)=>{console.log(response)},error:(response)=>{console.log('返回的状态码是:' + response)}})
}
JQuery中AJAX的使用
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
需要引入文件,线上地址
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
调用方式,在前面加一个$
符号
<body><h1>JQuery中使用AJAX</h1><input type="button" value="发送请求" onclick='post_data()'><input type="button" value="获取数据" onclick='get_data()'><script>function post_data(){$.ajax({type:'post',url:'https://httpbin.org/post',data:{uname:'pd',pwd:'h12',},success:(response)=>{console.log(response)}})}function get_data(){$.ajax({type:'get',url:'https://httpbin.org/get',// 也可以用拼接的写法// data:'uname=pd&pwd=123',data:{uname:'pd',pwd:'123',},success:(response)=>{console.log(response)}})}</script>
</body>
JQuery中AJAX的参数解释
jQuery.AJAX([settings])– type– url– data– contentType– beforSend 发送请求前可修改 XMLHttpRequest对象的函数,如添加自定义 HTTP 头– success– error
需求:后台要求一定是json数据格式,在contentType:'application/json',
设置即可
function post_json(){$.ajax({type:'post',url:'https://httpbin.org/post',data:{uname:'pd',pwd:'h12',},contentType:'application/json',success:(response)=>{console.log(response)}})
}
beforeSend的使用:主要应用于发送请求前的处理
- 获取前 将div设置面加载…
- 提交表单前 验证数据
如果在函数中返回ture继续执行发送请求,如果返回flase取消发送
JQuery中get与post
JQuery为GET与POST设置的专门的方法
function get_data(){$.get('https://httpbin.org/get',{uname:'pd', pwd:'h12'},function(response){console.log(response);})}function post_data(){$.post('https://httpbin.org/post',// 也可以传递str参数{uname:'pd', pwd:'h12'},function(response){console.log(response);})}
最后,官方文档,更多选择器的作用等等
FLask框架AJAX操作相关推荐
- flask html 模板继承,Flask框架模板继承实现方法分析
Flask框架模板继承实现方法分析 本文实例讲述了Flask框架模板继承实现方法.分享给大家供大家参考,具体如下: 在模板中,可能会遇到以下情况: 多个模板具有完全相同的顶部和底部内容 多个模板中具有 ...
- 基于Python Flask框架+jquery Ajax技术实现的增删改查(CRUD)+Ajax的异步文件上传
运行界面(话不多说先上图) 运行之后的index界面,有登陆.注册功能 登陆界面,输入数据库中用户名.密码不为空且密码是加密的数据,进入main界面 注册界面,用的bootstrop的弹窗,用户名和密 ...
- python的flask框架显示柱状图_使用Python的Flask框架,结合Highchart,动态渲染图表(Ajax 请求数据接口)...
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
- ci如何使用中$.ajax 中的 url 如何使用php的代码,CI框架中使用ajax操作数据库有关问题...
CI框架中使用ajax操作数据库问题 本帖最后由 A9925 于 2014-11-24 16:11:05 编辑 前台: //调用方法用ajax操作add_dbdata.php var xmlHttp ...
- Flask框架:如何运用Ajax轮询动态绘图
摘要:Ajax是异步JavaScript和XML可用于前后端交互. 本文分享自华为云社区<Flask框架:运用Ajax轮询动态绘图>,作者:LyShark. Ajax是异步JavaScri ...
- flask框架视图和路由_角度视图,路由和NgModule的解释
flask框架视图和路由 Angular vs AngularJS (Angular vs AngularJS) AngularJS (versions 1.x) is a JavaScript-ba ...
- Flask框架——CSRF保护
目录 CSRF攻击 如何防御CSRF攻击 Flask框架中的CSRF保护机制 CSRF攻击 CSRF全拼为Cross Site Request Forgery,译为跨站请求伪造. CSRF指攻击者盗用 ...
- 通过plotly.express库和Flask框架部署企鹅数据可视化的网页
这里不废话,直接入主题. 1.企鹅数据表下载网址 说明:阿里云天池提供大量免费的数据表,学习数据可视化的朋友可以自己去下载. 南极洲企鹅数据表下载地址 2.Flask框架的项目的文件目录如图 这里主要 ...
- python的flask框架显示柱状图_使用Python的Flask框架,结合Highchart,动态渲染图表...
服务端动态渲染图表 参考文章链接:https://www.highcharts.com.cn/docs/dynamic-produce-html-page 参考文章是使用php写的,我这边改用pyth ...
- 网易云课堂Python Flask框架全栈开发(200课全)
适用人群 1.想使用Python快速开发网站的. 2.前端开发者,想学习后端开发逻辑的. 3.有编程经验,想学习Flask的. 课程概述 本套课程的目标是从零基础开始,使用Flask框架开发企业级的项 ...
最新文章
- 计算机房 门,标准机房门的规格
- react 下拉选项自动滚动到可视区域
- 浅谈机器人产品落地全过程
- 活用内核链表解决约瑟夫斯问题
- Tampermonkey油猴插件各种浏览器下载教程【chrome、firefox、Edge、360、QQ、Safari等】
- Linux 源码编译安装过程-以安装XZ解压为例
- TIOBE 6月编程语言排行榜:Python势不可挡
- python实现随机抽取答题_如何在python中实现随机选择
- 从一张表里选择一列加入到另一张表_将Excel多个文件汇总到一张表
- 基于Netty模拟解析Binlog
- Android Studio使用jni、so库
- Linux系统下卸载jdk的步骤
- Java通过图片URL把图片上传到本地服务器
- x550网卡linux驱动,Intel英特尔X520/X540/X550/82599系列万兆网卡驱动5.10.2版For Linux(2021年2月1日发布)...
- 幼儿园小程序实战开发教程
- win7一激活就蓝屏
- 记录某大门户网站自动跳转不良网站,团队通宵排查病毒木马全过程
- 多次 ifconfig down 无效的问题
- pythonapp爬虫库_python爬虫抓取app列表的图标
- 【我Linux服务器被ddos了】记一次ddos防御+溯源+反击