Ajax 2024/3/31

Ajax

异步的Javascript和XML

作用:

数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。

异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。

原生Ajax

1.准备数据地址

2.创建XMLHttpRequest对象:用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body><script>// 1.创建XMLHttpRequestvar xmlHttpRequest=new XMLHttpRequest();//2.发送异步请求xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');xmlHttpRequest.send();//3.获取服务响应数据xmlHttpRequest.onreadystatechange=function(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;}}</script>
</html>

Axios

对原生的Ajax进行了封装,简化书写,快速开发。

Axios入门

1.引入Axios的js文件

2.使用Axios发送请求,并获取响应结果

    axios({method:"get",url:"xxx"}).then((result)=>{console.log(result.data);});
		axios({method:"post",url:"xxx",data:"id=1"}).then((result)=>{console.log(result.data);});

前后端分离开发

api接口文档

帮助实现前后端分离

YApi 接口文档管理平台

1.添加项目

2.添加分类

3.添加接口

 mock服务

为前端生成测试数据

前端工程化

是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

vue-cli

是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板。

功能:

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

依赖环境:NodeJS 

Vue组件库Element

Vue路由

打包部署

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

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

相关文章

看demo学算法之 贝叶斯网络

大家好&#xff0c;这里是小琳AI课堂&#xff01;今天我们一起来学习贝叶斯网络&#xff0c;这是一种非常酷的图形模型&#xff0c;它能帮助我们理解和处理变量之间的条件依赖关系。&#x1f3a8;&#x1f4ca; 贝叶斯网络基础 首先&#xff0c;贝叶斯网络是基于贝叶斯定理的…

springweb获取请求数据、spring中拦截器

SpringWeb获取请求数据 springWeb支持多种类型的请求参数进行封装 1、使用HttpServletRequest对象接收 PostMapping(path "/login")//post请求//spring自动注入public String login(HttpServletRequest request){ System.out.println(request.getParameter("…

C++基础知识(五)

struct VS class 特性structclass默认访问修饰符publicprivate成员访问权限成员默认是 public成员默认是 private继承方式默认继承方式为 public默认继承方式为 private用途通常用于简单的数据结构或记录通常用于复杂的数据类型和封装成员函数可以有成员函数可以有成员函数构造…

J.U.C Review - CopyOnWrite容器

文章目录 什么是CopyOnWrite容器CopyOnWriteArrayList优点缺点源码示例 仿写&#xff1a;CopyOnWriteMap的实现注意事项 什么是CopyOnWrite容器 CopyOnWrite容器是一种实现了写时复制&#xff08;Copy-On-Write&#xff0c;COW&#xff09;机制的并发容器。在并发场景中&#…

请解释一下 JDBC 的作用,并给出一个简单的使用 JDBC 查询数据库的例子?

JDBC (Java Database Connectivity) 是 Java 编程语言中用于连接和操作关系型数据库的标准 API。 它的主要作用是为 Java 应用程序提供了一种标准的方式来访问和处理数据库中的数据&#xff0c;而不需要关心底层具体的数据库系统&#xff08;如 MySQL, Oracle, PostgreSQL 等&…

半导体产业核心环节有哪些?2024年中国半导体产业研究报告大揭秘!

半导体指常温下导电性能介于导体与绝缘体之间的材料。半导体应用在集成电路、消费电子、通信系统、光伏发电、照明应用、大功率电源转换等领域。半导体产业经济则是指以半导体产品为核心的经济活动&#xff0c;包括芯片设计、制造、封装测试及应用等。它是全球经济的支柱&#…

ActiViz中的粒子系统详细解析

文章目录 简介粒子系统的基本概念VTK 中的相关类实现粒子系统的步骤C# 示例代码总结简介 在 ActiViz(基于 VTK 的 .NET 封装)中创建粒子系统,可以用来模拟和渲染像烟、火、雨等现象。VTK 提供了多种类和方法来实现粒子系统。由于 ActiViz 是 VTK 的封装,所以它具备 VTK 的…

Android实现自定义方向盘-5livedata实现

实现方向盘 将方向盘控件的实现转换为使用 LiveData 来管理和观察指针角度变化&#xff0c;能够更好地与 MVVM 架构相结合。通过 LiveData&#xff0c;我们可以方便地将角度的变化传递给观察者&#xff08;例如 UI 组件或 ViewModel&#xff09;&#xff0c;从而实现数据驱动的…

【mysql】mysql修改sql_mode之后无法启动

现象&#xff1a;修改后mysql无法启动&#xff0c;不报错 原因&#xff1a;MySQL在8以后sql_mode已经取消了NO_AUTO_CREATE_USER这个关键字。去掉这个关键字后&#xff0c;启动就可以了 修改前&#xff1a; sql_modeSTRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR…

C++学习笔记(7)

181、string 容器 string 是字符容器&#xff0c;内部维护了一个动态的字符数组。 与普通的字符数组相比&#xff0c;string 容器有三个优点&#xff1a;1&#xff09;使用的时候&#xff0c;不必考虑内存分配和释放的问题&#xff1b; 2&#xff09;动态管理内存&#xff08;可…

docke实战扩展二(docker build -t nginx:latest . 实战详解)

docker build -t nginx:latest . 是 Docker 中用于构建镜像的命令。下面我们来详细解释这个命令,并通过一个具体的生产案例来演示其实际应用。 命令解释 docker build:这是 Docker CLI 中用于构建镜像的命令。-t nginx:latest:这是为构建的镜像指定标签(tag)。-t 是 --ta…

英文缩写大全(IT 领域和电子行业制造领域)

英文缩写大全&#xff08;IT 领域和电子行业制造领域&#xff09; 前言一、计算机通用二、WINDOWS三、LINUX四、编程语言1. 前端 / 设计2. JAVA / Android3. PHP4. Python 四、电子行业制造领域五、常识 前言 本文收集了各类英文缩写大全&#xff0c;方便查阅&#xff0c;主要…

使用 Nginx 部署前端 Vue.js 项目

引言 Vue.js 是一个流行的前端框架&#xff0c;用于构建用户界面。当涉及到生产环境的部署时&#xff0c;选择一个合适的 web 服务器是非常重要的。Nginx 是一个高性能的 HTTP 和反向代理服务器&#xff0c;非常适合用来部署前端应用程序。本文将指导你如何使用 Nginx 部署一个…

ACM个人模板总结

一切的开始 初始模板 // o2 o3 优化防止卡常 #pragma GCC optimize(2) #pragma GCC optimize(3) #include <bits/stdc.h> using namespace std; #define lowbit(x) (x&(-x)) #define endl "\n" #define LF(x) fixed<<setprecision(x)// c 保留小…

在线演示文稿应用PPTist本地化部署并实现无公网IP远程编辑PPT

文章目录 前言1. 本地安装PPTist2. PPTist 使用介绍3. 安装Cpolar内网穿透4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows系统环境本地部署开源在线演示文稿应用PPTist&#xff0c;并结合cpolar内网穿透工具实现随时随地远程访问与使用该项目。 PPTist …

C#编程语言及.NET 平台快速入门指南

Office Word 不显示 Citavi 插件&#xff0c;如何修复&#xff1f;_citavi安装后word无加载项-CSDN博客 https://blog.csdn.net/Viviane_2022/article/details/128946061?spm1001.2100.3001.7377&utm_mediumdistribute.pc_feed_blog_category.none-task-blog-classify_ta…

CSS选择器:一文带你区分CSS中的伪类和伪元素!

一、伪类选择器 1、什么是伪类选择器 伪类选择器&#xff0c;顾名思义&#xff0c;是一种特殊的选择器&#xff0c;它用来选择DOM元素在特定状态下的样式。这些特定状态并不是由文档结构决定的&#xff0c;而是由用户行为&#xff08;如点击、悬停&#xff09;或元素的状态&a…

Java SpringBoot构建传统文化网,三步实现信息展示,传承文化精髓

✍✍计算机毕业编程指导师** ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java…

大道至简,大厂官网基本都走简洁化设计路线。

「大道至简」是一种设计理念&#xff0c;强调设计应该追求简洁、直观、易用&#xff0c;而不是过多的修饰和繁琐的细节。 对于大厂的官网来说&#xff0c;简洁化设计路线的选择可能有以下几个原因&#xff1a; 1. 更好的用户体验&#xff1a; 简洁的设计可以让用户更容易地理…

磁盘调度管理中移臂调度和旋转调度

在磁盘调度管理中&#xff0c;移臂调度和旋转调度是两种不同的优化调度方法&#xff0c;用来提高磁盘读写效率。我们可以通过以下两种方式来理解它们&#xff1a; 1. 移臂调度&#xff08;Seek Scheduling&#xff09; 移臂调度是指磁盘驱动器的磁头在不同的柱面&#xff08;…