当前位置： 首页 > news >正文

index.html 调用 ajax

news 2026/2/8 11:17:27

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>AJAX 请求示例</title><script>// 封装 Ajax 为公共函数：传入回调函数 success 和 failfunction myAjax (url, success, fail) {// 1、创建XMLHttpRequest对象var xmlhttpif (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest()} else {// 兼容IE5、IE6浏览器。不写也没关系xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')}// 2、发送请求xmlhttp.open('GET', url, true)xmlhttp.send()// 3、服务端响应xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {var obj = JSON.parse(xmlhttp.responseText)console.log('数据返回成功：' + obj)success && success(xmlhttp.responseText)} else {// 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。因为 fail 参数不一定会传。fail && fail(new Error('接口请求失败'))}}}// 单次调用 ajaxfunction singleAjaxCall () {myAjax('a.json', (res) => {console.log('单次调用结果：', res)}, (err) => {console.error('单次调用失败：', err)})}// 多次调用 ajax。接口请求顺序：a --> b --> cfunction multipleAjaxCalls () {myAjax('a.json', (res) => {console.log('a.json 结果：', res)myAjax('b.json', (res) => {console.log('b.json 结果：', res)myAjax('c.json', (res) => {console.log('c.json 结果：', res)}, (err) => {console.error('c.json 请求失败：', err)})}, (err) => {console.error('b.json 请求失败：', err)})}, (err) => {console.error('a.json 请求失败：', err)})}window.onload = function () {singleAjaxCall()multipleAjaxCalls()};</script>
</head><body><h1>AJAX 请求示例</h1>
</body></html>

创建 JSON 文件

a.json

{"message": "这是 a.json 的数据"
}

b.json

{"message": "这是 b.json 的数据"
}

c.json

{"message": "这是 c.json 的数据"
}

启动 HTTP 服务器

确保所有文件都在同一个目录下，然后启动 HTTP 服务器。

python -m http.server 8000

访问 HTML 文件

http://localhost:8000/index.html

相关文章：

index.html 调用 ajax

index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>AJAX 请求示例</title><script>// 封装 Ajax 为公共函数&#xff1a;传入回调函数 success 和 failfunction myAjax (url, suc…...

编程日记 2024/10/1 5:05:05

uniapp学习（003-1 vue3学习 Part.1）

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第11p-第p14的内容 文章目录 vue3使用介绍插值表达式例子时间戳随机数输出函数的值 ref响应式数据变量v-bind 绑…...

编程日记 2024/10/1 5:03:04

计算机毕业设计 基于深度学习的短视频内容理解与推荐系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…...

编程日记 2024/10/1 5:02:03

JavaScript网页设计案例深度解析：从理论到实践

前言 在现代前端开发中&#xff0c;JavaScript 是赋予网页生命的关键技术。静态的 HTML 和 CSS 虽然能创建美观的页面&#xff0c;但当我们需要增强用户交互和页面响应时&#xff0c;JavaScript 无疑成为最得力的工具。从程序员的角度来看&#xff0c;JavaScript 设计不仅仅是…...

编程日记 2024/10/1 5:01:02

spark-sql建表数据同步到hive

1、基础环境 组件版本备注hadoop3.4.0官方下载hive3.1.3自编译sparkspark-3.5.3-bin-hadoop3官方下载&#xff0c;需要内置hive的jar相关内容paimon0.9.0Maven官方下载jdk1.8.0_41maven3.9.6固定版本 2、停止服务、清理日志 先停止&#xff0c;清理数据 sudo kill -9 $(ps -ef…...

编程日记 2024/10/1 5:00:00

Django上下文处理器

1创建 &#xff08;如frontend目录下&#xff09;category_processors文件&#xff1a; def categories(request):from backend.models import Categorycategory_list Category.objects.all()return {category_list:category_list}这里&#xff0c;必须返回一个字典。 2&…...

编程日记 2024/10/1 4:58:59

旭升集团携手纷享销客，构建全方位客户关系管理平台

宁波旭升集团股份有限公司&#xff08;以下简称“旭升集团”&#xff09;自2003年成立&#xff0c;总部位于中国宁波&#xff0c;集团设有压铸、锻造、挤压、集成四大事业部&#xff0c;在亚洲、欧洲、美洲等地均设立研发中心及制造基地&#xff0c;产品主要覆盖新能源汽车的电…...

编程日记 2024/10/1 4:55:57

uniapp 知识点

自定义导航 在page.json navigationstyle":"custom"navigateTo传参 页面传参只能onLoad(option)里面拿 px和upx的关系 在750设计图中&#xff0c;1px1upx 路由 navigateBack返回上一页 重定向 其实就是把当前页面干掉了 公共组件和页面共同点 computed,watc…...

编程日记 2024/10/1 4:54:56

慢病中医药膳养生食疗管理微信小程序、基于微信小程序的慢病中医药膳养生食疗管理系统设计与实现、中医药膳养生食疗管理微信小程序的开发与应用（源码+文档+定制）

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2024/10/1 4:52:54

解决 Android WebView 无法加载 H5 页面常见问题的实用指南

目录 1. WebView 简介 2. 常见问题 3. 网络权限设置 4. 启用 JavaScript 5. DOM Storage 的重要性 6. 处理 HTTPS 问题 7. 设置 WebViewClient 8. 调试工具 9. 其他调试技巧 10. 结论 相关推荐 1. WebView 简介 Android WebView 是一种视图组件&#xff0c;使得 And…...

编程日记 2024/10/1 4:51:53

Ollama本地部署大模型及应用

文章目录 前言一、下载安装1.Mac2.Windows3.linux4.docker5.修改配置&#xff08;可选&#xff09;1.linux系统2.window 系统3.mac系统 二、Ollama使用1.命令2.模型下载3.自定义模型4.API 服务 三、Open WebUI 使用四、Dify使用 前言 Ollama 是一个专注于本地部署大型语言模型…...

编程日记 2024/10/1 4:50:50

读代码UNET

这个后面这个大小怎么算的&#xff0c;这参数怎么填&#xff0c;怎么来的&#xff1f; 这是怎么看怎么算的&#xff1f; 这些参数设置怎么设置&#xff1f;卷积多大&#xff0c;有什么讲究&#xff1f;...

编程日记 2024/10/1 4:49:49

【java】前端RSA加密后端解密

目录 1. 说明2. 前端示例3. 后端示例3.1 pom依赖3.2 后端结构图3.3 DecryptHttpInputMessage3.4 ApiCryptoProperties3.5 TestController3.6 ApiCryptoUtil3.7 ApiDecryptParamResolver3.8 ApiDecryptRequestBodyAdvice3.9 ApiDecryptRsa3.10 ApiCryptoProperties3.11 KeyPair3…...

编程日记 2024/10/1 4:47:47

机器学习 | Scikit Learn中的普通最小二乘法和岭回归

在统计建模中&#xff0c;普通最小二乘法&#xff08;OLS&#xff09;和岭回归是两种广泛使用的线性回归分析技术。OLS是一种传统的方法&#xff0c;它通过最小化预测值和实际值之间的平方误差之和来找到数据的最佳拟合线。然而&#xff0c;OLS可以遭受高方差和过拟合时&#x…...

编程日记 2024/10/1 4:46:46

代码随想录冲冲冲 Day60 图论Part11

97. 小明逛公园 floyd算法 其实就是先用i和j拼成一个平面 然后看每次从i到j距离 这里分两种情况 1.中间没有经过别的点 2.中间有经过别的点 那么最小步数就要取这两个的最小值 所有根本逻辑是i j确定一个面 再通过不同的k去看每一个中间点 所以k要在最外层 上一次的值要…...

编程日记 2024/10/1 4:45:44

golang web笔记-1.创建Web Server和Handler请求

1. 创建http web server的两个方法 1.1. 方式一&#xff1a;http.ListenAndServe(addr string, handler Handler) addr string&#xff1a;监听地址&#xff0c;如果为"" ,那么就是所有网络接口的80接口handler Handler&#xff1a;如果为nil&#xff0c;那么就是D…...

编程日记 2024/10/1 4:43:43

【Python】Copier：高效的项目模板化工具

Copier 是一个开源的 Python 工具&#xff0c;用于基于项目模板快速生成新项目。它通过灵活的模板化系统&#xff0c;使开发者可以快速创建、维护和更新项目模板&#xff0c;从而自动化项目的初始化流程。无论是简单的文件复制&#xff0c;还是复杂的项目结构配置&#xff0c;C…...

编程日记 2024/10/1 4:41:40

Spring系列 BeanPostProcessor

文章目录 BeanPostProcessor注册时机执行时机 InstantiationAwareBeanPostProcessorSmartInstantiationAwareBeanPostProcessor 本文源码基于spring-beans-5.3.31 参考&#xff1a;https://docs.spring.io/spring-framework/reference/core/beans/factory-extension.html#beans…...

编程日记 2024/10/1 4:38:37

Qualitor processVariavel.php 未授权命令注入漏洞复现(CVE-2023-47253)

0x01 漏洞概述 Qualitor 8.20及之前版本存在命令注入漏洞,远程攻击者可利用该漏洞通过PHP代码执行任意代码。 0x02 复现环境 FOFA&#xff1a;app"Qualitor-Web" 0x03 漏洞复现 PoC GET /html/ad/adpesquisasql/request/processVariavel.php?gridValoresPopHi…...

编程日记 2024/10/1 4:35:34

SpringBoot的概述与搭建

目录 一.SpringBoot的概述 二.SpringBoot 特点 三.SpringBoot 的核心功能 3.1起步依赖 3.2自动配置 四.SpringBoot 开发环境构建 五.SpringBoot 配置文件 六.SpringBoot数据访问管理 七.springboot注解 八.springboot集成mybatis 九.springboot全局异常捕获与处理 一…...

编程日记 2024/10/1 4:34:33

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2026/1/28 15:17:32

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2026/2/7 5:16:05

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2026/1/28 21:45:43

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2026/2/6 2:13:58

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46