Ajax

一、什么是Ajax

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>原生Ajax</title>
</head>
<body><input type="button" value="获取数据" onclick="getData()"><div id="div1"></div></body>
<script>function getData(){//1. 创建XMLHttpRequest var 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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax-Axios</title><script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()"></body>
<script>function get(){//通过axios发送异步请求-get// axios({//     method: "get",//     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"// }).then(result => {//     console.log(result.data);// })axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {console.log(result.data);})}function post(){//通过axios发送异步请求-post// axios({//     method: "post",//     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",//     data: "id=1"// }).then(result => {//     console.log(result.data);// })axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {console.log(result.data);})}
</script>
</html>

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

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

相关文章

gitee-快速设置

快速设置— 如果你知道该怎么操作&#xff0c;直接使用下面的地址 HTTPS SSH: gitgitee.com:liuzl33078235/esp-idf.git 我们强烈建议所有的git仓库都有一个README, LICENSE, .gitignore文件 初始化 readme 文件 Git入门&#xff1f;查看 帮助 , Visual Studio / TortoiseG…

mysql实际调优

一般实际调优的情况就不需要去考虑mysql数据库结构或者命名优化那些。做这些优化是大动作&#xff0c;也不是咱们一般人去接触到的。 所以我们针对mysql的调优其实大部分还是针对索引进行优化。 我们刚接触这个表的话可以先查询当前表中所有的索引 使用 SHOW INDEX FROM yo…

Selenium —— 网页frame与多窗口处理!

一、多窗口处理. 1.1、多窗口简介 点击某些链接&#xff0c;会重新打开⼀个窗⼜&#xff0c;对于这种情况&#xff0c;想在新页⾯上操作&#xff0c;就 得先切换窗⼜了。 获取窗⼜的唯⼀标识⽤句柄表⽰&#xff0c;所以只需要切换句柄&#xff0c;就可以在多个页⾯灵 活操作了…

大数据之Kafka

Kafka概述 传统定义&#xff1a;一个分布式的基于发布/订阅模式的消息队列&#xff0c;主要应用于大数据实时处理领域。 最新定义&#xff1a;一个开源的分布式事件流平台&#xff0c;被数千家公司用于高性能数据管道、流分析、数据集成和关键任务应用。最主要的功能是做数据的…

一表总结前端axios传参与后端springboot接收

方法参数形式后端示例注意get,deleteurl中拼接(RestFul风格&#xff09;PathVariable url: /test ‘/’ name ‘/’ age, GetMapping("/test/{name}/{age}") public Result find( PathVariable("name") String name, PathVari…

深耕能源+政务 | 云畅科技入选中国信通院2023低代码无代码产业图谱

由中国信息通信研究院&#xff08;以下简称“中国信通院”&#xff09;、中国通信标准化协会联合主办的2023数字化转型发展大会暨首届数字原生大会于9月13-14日在北京举办&#xff0c;“2023低代码无代码产业图谱”正式发布&#xff01; 01 2023年&#xff0c;中共中央、国务院…

北斗卫星导航系统:引领现代林业发展的先锋

北斗卫星导航系统&#xff1a;引领现代林业发展的先锋 随着人类社会的发展&#xff0c;林业作为生态环境保护和经济发展的重要组成部分&#xff0c;也在不断向前发展。为了更好地管理和保护森林资源&#xff0c;我们必须寻求一种新的方式来提高林业管理的效率。而北斗技术的应用…

SpringBoot的excel模板导出

Word的模板导出(参考&#xff1a;https://easyexcel.opensource.alibaba.com/docs/current/quickstart/fill) 创建有两个sheet的excel文件模板 将模板文件放入resource\templates/doc下使用 public void exportUavInfoExcel(HttpServletResponse response, CaseExportRPO cas…

如何去开展软件测试工作

1. 软件测试 在一般的项目中&#xff0c;一开始均为手动测试&#xff0c;由于自动化测试前期投入较大&#xff0c;一般要软件项目达到一定的规模&#xff0c;更新频次和质量均有一定要求时才会上自动化测试或软件测试。 1.1. 项目中每个成员的测试职责 软件测试从来不是某一…

flink使用kryo支持自定义的序列化器

背景 这里所说的序列化器不是指实现TypeSerializer的状态序列化器&#xff0c;而是指flink在使用KryoSerializer序列化器时遇到kryo无法序列化的类型时&#xff0c;通过往kryo中注册某个序列化器类来让kryo可以序列化某个类的实例&#xff0c;所以这里严格意义上应该是说&…

TypeScript学习记录

一、TS开发环境的搭建 1、下载并安装node.js 2、使用npm全局安装typeScript 进入命令行输入&#xff1a;npm i -g typescript 3、创建一个ts文件 4、使用tsc对ts文件进行编译 进入命令行进入ts文件所在目录执行命令&#xff1a;tsc 文件名.ts 二、TS基本变量 1、类型声…

ChatGPT:使用FastJSON库关闭JSON引用检测的方法

ChatGPT&#xff1a;使用FastJSON库关闭JSON引用检测的方法 下面我将输入一个方法&#xff0c;请你记住&#xff1a; ChatGPT&#xff1a; 好的&#xff0c;请输入方法。 RequestMapping("/getLianZhengLabels") public String getLianZhengLabels() {HashMap<St…

Kubernetes(K8s):未来云原生应用的引擎

文章目录 Kubernetes的核心概念和架构为什么K8s是构建云原生应用的首选工具&#xff1f;云原生应用的好处和挑战容器编排的重要性&#xff1a;Docker和KubernetesKubernetes生态系统&#xff1a;核心组件和附加工具实际应用&#xff1a;企业如何在生产环境中使用K8s未来展望&am…

rust trait对象

在拥有继承的语言中&#xff0c;可以定义一个名为shape的基类&#xff0c;该类上有一个draw方法。其他的类比如Button、SelectBox继承shape。它们各自覆盖draw方法。调用这些子类的draw方法时&#xff0c;就可以把它们统一当作shape来使用。不过Rust并没有继承&#xff0c;如果…

做一个贪吃蛇小游戏happy一下

直接Vue上代码 <template><div><div>贪吃蛇</div><canvas id"canvas" width"400" height"400"></canvas></div> </template><script> export default {data() {return {ctx: null,inter…

Android 遍历界面所有的View

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、实践四、 推荐阅读 一、导读 我们…

结构型设计模式——组合模式

摘要 组合模式(composite pattern): 允许你将对象组合成树形结构来表现"整体/部分"层次结构. 组合能让客户以一致的方式处理个别对象以及对象组合。 一、组合模式的意图 将对象组合成树形结构来表示“整体/部分”层次关系&#xff0c;允许用户以相同的方式处理单独…

AVL Cruise 2020.1 安装教程

文章目录 安装包安装破解 安装包 链接&#xff1a;https://pan.baidu.com/s/1GxbeDj_SyvKFyPeTsstvTQ?pwd6666 提取码&#xff1a;6666 安装 安装文件&#xff1a; 双击setup.exe&#xff1a; 一直netx&#xff0c;中间要修改两次路径&#xff0c;第一次是安装位置&#xf…

Flume最简单使用

文章目录 一、简介1、定义2、基础架构 二、快速入门1、解压Flume2、案例一&#xff1a;监控端口号3、案例二&#xff1a;将空目录下文件 三、Flume进阶1、Flume事务2、Flume Agent内部原理3、案例一&#xff1a;监控日志4、案例二&#xff1a;多路复用和拦截器适应4.1 原理4.2 …

二进制十六机制CRC总和异或等工具类

package com.dc.util;import org.apache.http.util.TextUtils; import java.nio.ByteBuffer; import