前端知识--前端访问后端技术Ajax及框架Axios

一、异步数据请求技术----Ajax

Ajax是前端访问后端的技术,为异步请求(不刷新页面,请求数据,只更新局部数据)。

例如:在京东网站中搜索电脑,就会出现一些联想搜索,但此时页面并没有刷新。

 异步通信,常用的两种途径:

1)联想搜索

2)表单校验

 

步骤3中的onreadystatechange可以监听服务器端数据,数据来了,即可响应。 

二、Axios框架:用于替代Ajax

原生的Ajax因繁琐,已经不怎么用了,目前,使用Axios框架,可以简化Ajax操作。 

使用Axios操作,分为两步。其中发送请求分为get和post两种。

url是访问后台服务器的地址 ;

then的括号中填写的是函数,如上写的是箭头函数,(result)=>{}   result是函数参数,该参数为对象,用于接收后台传递过来的所有数据。该对象中含有多项数据,我们只需要data数据,故使用result.data

then为回调函数,当服务器访问成功,并响应了数据,就会触发此函数,服务端没影响,该函数是不执行的。 

示例:

使用post方式,需要再添加 data ,“id=1”是根据实际条件填写的。

上述get、post方式还可以如下简化,一般使用如下的方式 

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

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

相关文章

Window下CLion实现本机通过socket通信-C++

1.引言-什么是socket socket即套接字,用于描述地址和端口,是一个通信链的句柄。应用程序通过socket向网络发出请求或者回应。 sockets(套接字)编程有三种,流式套接字(SOCK_STREAM),数据报套接字&#xff…

go语言开发Prometheus Exporter(DM数据库)

一、介绍 源码步骤基于dameng_exporter源码讲解,看完本篇文章可以直接进行二次开发。 dameng exporter的开源地址:https://github.com/gy297879328/dameng_exporter(可直接对接prometheusgrafana 提供表盘) 开发一个exporter 其…

Linux中的三类读写函数

文件IO和标准IO的区别 遵循标准: 文件IO遵循POSIX标准,主要在类UNIX环境下使用。标准IO遵循ANSI标准,具有更好的可移植性,可以在不同的操作系统上重新编译后运行。可移植性: 文件IO的可移植性相对较差,因为…

基于大模型零代码1小时完成国标数据分级分类近义词库构建及思考

1. 任务背景及困难分析 因项目要求,需要对国家标准国民经济行业分类-GB/T 4754-2017【1】进行近义词库的构建,时间非常紧,只给了很短时间进行处理,目标是构建一份中等粒度的行业近义词库。 搁在以前,可能需要点时…

Linux 安装mysql-client-core-8.0

在Linux上安装mysql-client-core-8.0 安装流程 下面是安装mysql-client-core-8.0的步骤和相应的命令: 步骤1:更新系统软件源 我们首先需要更新系统的软件源,以确保我们能够获取到最新的软件包列表。使用以下命令更新软件源: …

Ansible——inventory 主机清单

1、inventory 含义 Inventory支持对主机进行分组,每个组内可以定义多个主机,每个主机都可以定义在任何一个或多个主机组内。 如果是名称类似的主机,可以使用列表的方式标识各个主机。 vim /etc/ansible/hosts [webservers] 192.168.20.11:222…

平凯星辰亮相 2024 中国国际金融展,发布银行交易明细查询白皮书

7 月 19 日至 21 日,备受瞩目的 2024 中国国际金融展(以下简称金融展)在北京国家会议中心隆重举办。作为中国乃至亚洲最大的金融科技展会,本届金融展以“数字金融引领未来,守正创新共筑金融新生态”为主题,…

C++_单例模式

目录 1、饿汉方式实现单例 2、懒汉方式实现单例 3、单例模式的总结 结语 前言: 在C中有许多设计模式,单例模式就是其中的一种,该模式主要针对类而设计,确保在一个进程下该类只能实例化出一个对象,因此名为单例。而…

temu数据分析怎么做,temu选品数据分析怎么做

在竞争激烈的电商市场中,数据分析已成为商家提升销售业绩、优化经营策略的重要工具。特别是对于Temu平台的卖家而言,掌握数据分析技巧,特别是选品数据分析,更是至关重要。本文将为您详细解析如何在Temu平台上进行数据分析&#xf…

Docker 安全及日志管理(包含SSL证书)

目录 一、Docker 存在的安全问题 二、Docker 架构缺陷与安全机制 三、Docker 安全基线标准 四、容器相关的常用安全配置方法 五、限制流量流向 六、镜像安全 七、DockerClient 端与 DockerDaemon 的通信安全 https的单向认证流程 https的双向认证流程 八、DockerClie…

Ubuntu 22.04.4 LTS (linux) GoAccess 分析 Nginx 日志

1 安装goaccess sudo apt-get update sudo apt-get install goaccess 2 控制台运行 goaccess -a -d -f /usr/local/openresty/nginx/logs/access.log -p /etc/goaccess/goaccess.conf #sudo vim /etc/goaccess/goaccess.conf time-format %H:%M:%S date-format %d/%b…

iOS ------ Block的相关问题

Block的定义 Block可以截获局部变量的匿名函数&#xff0c; 是将函数及其执行上下文封装起来的对象。 Block的实现 通过Clang将以下的OC代码转化为C代码 // Clang xcrun -sdk iphoneos clang -arch arm64 -rewrite-objc main.m//main.m #import <Foundation/Foundation.…

3.2、数据结构-数组、矩阵和广义表

数组结构 数组是定长线性表在维度上的扩展,即线性表中的元素又是一个线性表。N维数组是一种“同构”的数据结构,其每个数据元素类型相同、结构一致。 一个m行n列的数组表示如下: 其可以表示为行向量形式&#xff08;一行一行的数据&#xff09;或者列向量形式&#xff08;一…

Nginx 怎样处理请求的故障转移?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01; 文章目录 Nginx 怎样处理请求的故障转移&#xff1f;一、理解故障转移的重要性二、Nginx 中的故障检测机制三、Nginx 中的请求分配策略四、Nginx 中的故障转移实现方式五、…

Shell脚本编程(一)

目录 一、Shell命令行的书写规则 二、编写/修改权限及执行shell程序的步骤 1、编写简单Shell程序 2、建立可执行程序 3、执行Shell程序 4、实例 三、Shell程序中使用参数 1、位置参数 2、内部参数 3、实例一 4、实例二 一、Shell命令行的书写规则 在执行Shell命令时…

搭建本地私有知识问答系统:MaxKB + Ollama + Llama3 (wsl网络代理配置、MaxKB-API访问配置)

目录 搭建本地私有知识问答系统:MaxKB、Ollama 和 Llama3 实现指南引言MaxKB+Ollama+Llama 3 Start buildingMaxKB 简介:1.1、docker部署 MaxKB(方法一)1.1.1、启用wls或是开启Hyper使用 WSL 2 的优势1.1.2、安装docker1.1.3、docker部署 MaxKB (Max Knowledge Base)MaxKB …

便携式气象仪:科技赋能,让气象观测更智能

随着科技的快速发展&#xff0c;越来越多的领域受益于技术的进步。其中&#xff0c;气象观测领域也不例外。传统的气象观测设备虽然精确可靠&#xff0c;但往往体积庞大、携带不便&#xff0c;且需要专业人员进行操作和维护。而便携式气象仪的出现&#xff0c;则打破了这一局限…

在WPF中使用WebView2详解

Microsoft Edge WebView2 Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎&#xff0c;以在本机应用中显示 web 内容。 使用 WebView2 可以在本机应用的不同部分嵌入 Web 代码&…

Golang | Leetcode Golang题解之第284题窥视迭代器

题目&#xff1a; 题解&#xff1a; type PeekingIterator struct {iter *Iterator_hasNext bool_next int }func Constructor(iter *Iterator) *PeekingIterator {return &PeekingIterator{iter, iter.hasNext(), iter.next()} }func (it *PeekingIterator) hasNe…

学习记录day19——数据结构 查找算法

概念 在给定数据元素的某个值&#xff0c;在查找表中确定一个其关键字等于给定值的数据元素的操作&#xff0c;叫做查找 查找的分类 顺序查找:将待查找数据&#xff0c;进行全部遍历一遍&#xff0c;直到找到要查找的元素 折半查找:每次都去除一半的查找范围的查找方式&#x…