Vite响应Ajax请求

Vite响应Ajax请求

陈拓 2024/06/20-2024/06/24

1. 概述

http-server、live-server 等常用于本地测试和开发的http服务器不能很好的支持 ES 模块,在测试ES 模块时浏览器控制台经常显示错误:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

相比之下,Vite 是一个现代的前端构建工具,它具有对模块的特殊处理能力,可以更好地解决这类问题。Vite 内置了对 ES 模块的支持,因此它能够正确地设置适当的 MIME 类型,确保浏览器可以正确加载 JavaScript 模块。

我们在《用Vite构建Lit项目》

https://blog.csdn.net/chentuo2000/article/details/134831884?spm=1001.2014.3001.5502

一文中已经构建了一个Vite+Lit项目模板,在此基础上本文增加Vite对Ajax请求的响应功能。

2. 构建Vite项目

2.1 使用前面构建的Vite项目

使用我们在《用Vite构建Lit项目》一文中构建好的项目。

cd ~/lit

cp -r ~/lit/test-js ./lit-test-js

cd lit-test-js

删除项目中不用的文件,让项目尽量简洁:

2.2 修改代码

  • index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Simple Lit Project</title><script type="module" src="/src/my-element.js"></script>
</head>
<body><!-- 使用自定义的 Lit 组件 --><simple-lit-component></simple-lit-component>
</body>
</html>
  • my-element.js
// 引入 Lit
import { LitElement, html } from 'lit';// 创建一个简单的 Lit 组件
export class SimpleLitComponent extends LitElement {render() {return html`<h1>Hello, Lit!</h1><p>This is a simple Lit component.</p>`;}
}// 注册自定义元素
customElements.define('simple-lit-component', SimpleLitComponent);
  • package.json
{"name": "vite-lit-starter","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite --host 192.168.137.9","build": "vite build","preview": "vite preview"},"dependencies": {"lit": "^3.1.0"},"devDependencies": {"vite": "^5.0.4"}
}

为用import引入ES模块,需要在package.json中设置 "type": "module"。

2.3 运行测试Vite项目

npm run dev

在浏览器中查看:

3. 让Vite响应Ajax请求

Vite 是一个现代化的前端构建工具,它主要处理静态资源的构建和开发服务。如果你想要让 Vite 响应 Ajax 请求,你需要在 Vite 应用中使用 JavaScript 调用 Fetch API来发送请求,并启动一个后端服务器响应请求。

Fetch API是浏览器原生的API,就像alert也是浏览器原生API一样,这一点可以通过浏览器的控制台来验证:

Fetch API 是现代浏览器提供的用于发起网络请求的接口,它提供了一种更简洁、更强大的方式来进行网络通信。Fetch API 可以替代传统的 XMLHttpRequest(XHR)对象,提供了更好的使用体验和更强大的功能。

使用Fetch API发送GET请求的基本代码如下:

fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

3.1 修改my-element.js

// 引入 Lit
import { LitElement, html } from 'lit';// 创建一个简单的 Lit 组件
export class SimpleLitComponent extends LitElement {render() {return html`<h1>Hello, Lit!</h1><p>This is a simple Lit component.</p>`;}
}// 注册自定义元素
customElements.define('simple-lit-component', SimpleLitComponent);fetch('http://192.168.137.9:3000/api/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(data => {console.log(data);}).catch(error => {console.error('There has been a problem with your fetch operation:', error);});

代码中构造了一个GET请求到API端点http://192.168.137.9:3000/api/data,然后通过.then()处理响应,将其转换为JSON,并在控制台中打印出来。如果在请求过程中出现错误,它会被捕获并在控制台中输出。

3.2 运行一个后台Web服务器

在实际开发中,后端数据接口服务器通常是一个 RESTful API 或 GraphQL API,它们提供了一组端点(URLs)来处理前端的请求并返回数据。以下是一个简单的 RESTful API 服务器的例子,使用 Node.js 和 Express 框架来创建:

在《Node.js+Express+Nodemon+Socket.IO构建Web实时通信》

https://blog.csdn.net/chentuo2000/article/details/134651743?spm=1001.2014.3001.5502

一文中我们构建过一个使用 Node.js 和 Express 框架的Web服务器server_express.js

cd ~/inode/

3.2.1 重写server_express.js
const express = require('express');
const cors = require('cors'); // 实现跨域请求
const app = express();
const port = 3000;
const hostname = '192.168.137.9';// 用于提供 JSON 响应的中间件
app.use(express.json());
// 使用cors中间件
app.use(cors());// 一个简单的 GET 请求端点
app.get('/api/data', (req, res) => {// 模拟从数据库获取数据const data = {message: 'Hello, this is your data!',items: [1, 2, 3, 4, 5]};res.json(data); // 发送 JSON 响应
});// 启动服务器
app.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);
});

关于跨域请求我们在后面有说明。

注意:nodejs服务器文件server_express.js不要和Vite项目放在同一个目录下面。因为node项目用require导入CommonJS模块,Vite项目用import导入ES6模块,两个目录中的package.json不同。

3.2.2 安装express

npm install express --save

3.2.3 启动这个服务器

我们在另一个终端中启动这个服务器:

node server_express.js

在浏览器中测试:

http://192.168.137.9:3000/api/data

现在服务器正在运行,并且有一个端点 /api/data 可以返回 JSON 数据。你可以在浏览器中使用 Fetch API 来调用这个端点。

3.2.4 nodejs处理跨域请求

在Node.js中处理跨域请求,可以使用一个名为cors的中间件库。以下是如何在你的Node.js应用中安装和配置cors库的步骤。

  • 安装cors库

npm install cors

  • 在Node.js应用中引入并使用cors
const express = require('express');
const cors = require('cors'); // 实现跨域请求
const app = express();
const port = 3000;
const hostname = '192.168.137.9';// 用于提供 JSON 响应的中间件
app.use(express.json());
// 使用cors中间件
app.use(cors());
……

这样配置后,你的Node.js应用将允许跨域请求。

以上代码示例展示了如何在Express应用中简单地启用所有跨域资源共享(CORS),以及如何进行更具体的配置。

3.3 前端GET请求测试

现在后端服务器已经在运行,并且有一个端点 /api/data 可以返回 JSON 数据。下面我们在浏览器中使用 Fetch API 来调用这个端点。

前端发送GET请求到后端服务器,并获取后端的响应数据。

3.3.1 运行前端服务

在另一个终端中进入前端项目目录,启动Vite服务:

npm run dev

3.3.2 在浏览器中测试

打开浏览器,并访问Vite项目地址:

http://192.168.137.9:5173/

浏览器控制台显示:

我用谷歌浏览器Chrome。

本文例子lit-test-js.tar.gz的下载网址:

https://download.csdn.net/download/chentuo2000/89481137

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

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

相关文章

esp8266 GPIO

功能综述 ESP8266 的 16 个通⽤ IO 的管脚位置和名称如下表所示。 管脚功能选择 功能选择寄存器 PERIPHS_IO_MUX_MTDI_U&#xff08;不同的 GPIO&#xff0c;该寄存器不同&#xff09; PIN_FUNC_SELECT(PERIPHS_IO_MUX_MTDI_U,FUNC_GPIO12);PERIPHS_IO_MUX_为前缀。后面的…

基于SpringBoot+Vue的大药房管理系统(带1w+文档)

基于SpringBootVue的大药房管理系统(带1w文档) 本系统主要包括管理员和用户两个用户角色&#xff1b;主要包括&#xff1a;首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;保健品分类管理&#xff0c;药品分类管理&#xff0c;药品信息管理&#xff0c;疫情常识管理…

Flink入门实战详解

Flink入门实战 Flink项目构建 1)基于MavenIdea创建项目&#xff1a; 使用maven进行项目构建&#xff0c;如图1所示。 图-34 构建maven项目 输入项目中的maven的坐标和存储坐标&#xff0c;如图2所示。 图2 maven坐标和存储位置 2)Maven依赖&#xff1a; <properties>…

开源API网关-ApacheShenYu首次按照启动遇到的问题

一.背景 公司有API网关产品需求&#xff0c;希望有图形化的后台管理功能。看到了ApacheShenYu&#xff0c;作为Apache的顶级项目&#xff0c;直接认可了。首先&#xff0c;感谢各位大神的付出&#xff0c;初步看这个项目是国内大厂中的大神创立的&#xff0c;在此表示膜拜&…

阿里云服务器入门使用教程——购买及操作系统选择并进行远程连接

文章目录 一、首先选择一个你自己要买的云服务器类型二、能选的就一个地域和一个操作系统&#xff0c;其他都是固定的三、创建完实例并使用finalshell连接的效果(要在完成后续步骤后才能连接)四、购买之后进入阿里云控制台&#xff0c;开通资源中心五、然后就可以看到已经帮你创…

Vue基础了解

目录 1、什么是Vue.js 2、Vue的优点 3、Vue的安装 4、Vue程序 5、Vue指令 代码演示&#xff1a; 6、Vue实例的生命周期 1、什么是Vue.js Vue (读音 /vjuː /&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层&#xff0c;不仅易…

Python28 十大机器学习算法之线性回归和逻辑回归

1.三类广义上的机器学习算法 监督学习。工作原理&#xff1a;该算法由一个目标/结果变量&#xff08;或因变量&#xff09;组成&#xff0c;该变量将从一组给定的预测变量&#xff08;自变量&#xff09;进行预测。使用这组变量&#xff0c;我们生成了一个将输入数据映射到所…

常见的工业信号指示灯及按钮开关代表什么?如何辨认?

信号指示灯&#xff0c;是用灯光监视电路和电气设备工作或位置状态的器件。也是自动化设备中最直观&#xff0c;唯一的监视元器件。主要的作用是通常用于反映电路的工作状态&#xff08;有电或无电&#xff09;、电气设备的工作状态&#xff08;运行、停运或试验&#xff09;和…

小程序web-view无法打开该页面的解决方法

问题&#xff1a;开发者工具可以正常打开&#xff0c;正式上线版小程序使用 web-view 组件测试时提示&#xff1a;“无法打开该页面&#xff0c;不支持打开 https://xxxxxx&#xff0c;请在“小程序右上角更多->反馈与投诉”中和开发者反馈。” 解决方法&#xff1a;需要配…

市场拓展招聘:完整指南

扩大招聘业务会给你带来很多挑战&#xff0c;更不用说你已经在处理的问题了。助教专业人士每周花近13个小时为一个角色寻找候选人。此外&#xff0c;客户的需求也在不断变化&#xff0c;招聘机构之间的竞争也在加剧。毫无疑问&#xff0c;对增长有战略的方法会有很大的帮助。一…

jeecg导入excel 含图片(嵌入式,浮动式)

jeecgboot的excel导入 含图片&#xff08;嵌入式&#xff0c;浮动式&#xff09; 一、啰嗦二、准备三、 代码1、代码&#xff08;修改覆写的ExcelImportServer&#xff09;2、代码&#xff08;修改覆写的PoiPublicUtil&#xff09;3、代码&#xff08;新增类SAXParserHandler&a…

【数学建模】——【python库】——【Pandas学习】

专栏&#xff1a;数学建模学习笔记 pycharm专业版免费激活教程见资源&#xff0c;私信我给你发 python相关库的安装&#xff1a;pandas,numpy,matplotlib&#xff0c;statsmodels 总篇&#xff1a;【数学建模】—【新手小白到国奖选手】—【学习路线】 第一卷&#xff1a;【数学…

总结一下Linux、Windows、Ubuntu、Debian、CentOS等到底是啥?及它们的区别是什么

小朋友你总是有很多问好 你是否跟我一样&#xff0c;不是计算机科班出身&#xff0c;很多东西都是拿着在用&#xff0c;并不知道为什么&#xff0c;或者对于它们的概念也是稀里糊涂的&#xff0c;比如今天说的这个。先简单描述下&#xff0c;我先前的疑问&#xff1a; Linux是…

layui+jsp项目中实现table单元格嵌入下拉选择框功能,下拉选择框可手动输入内容或选择默认值,修改后数据正常回显。

需求 table列表中的数据实现下拉框修改数据&#xff0c;当默认的下拉框不符合要求时&#xff0c;可手动输入内容保存。内容修改后表格显示修改后的值同时表格不刷新。 实现 layui框架下拉框组件只能选择存在的数据&#xff0c;不支持将输入的内容显示在input中的功能&#x…

【C++进阶9】异常

一、C语言传统的处理错误的方式 终止程序&#xff0c;如assert 如发生内存错误&#xff0c;除0错误时就会终止程序返回错误码 需要程序员自己去查找对应的错误 z如系统的很多库的接口函数都是通 过把错误码放到errno中&#xff0c;表示错误 二、C异常概念 异常&#xff1a;函…

传神论文中心|第14期人工智能领域论文推荐

在人工智能领域的快速发展中&#xff0c;我们不断看到令人振奋的技术进步和创新。近期&#xff0c;开放传神&#xff08;OpenCSG&#xff09;社区发现了一些值得关注的成就。传神社区本周也为对AI和大模型感兴趣的读者们提供了一些值得一读的研究工作的简要概述以及它们各自的论…

steam搬砖

​   CS2/Steam游戏拆砖项目如何赚钱&#xff0c;利润在哪里&#xff1f;    1、利润主要来自于汇差。例如&#xff0c;今天美元的汇率是1美元7.3人民币&#xff0c;100美元730人民币。但事实上&#xff0c;通过某些特定渠道&#xff08;如TB&#xff09;充值100美元仅需55…

Meet AI4S 直播预告丨房价分析新思路:神经网络直击复杂地理环境中的空间异质性

近年来&#xff0c;房地产市场起起落落&#xff0c;房价已经成为了扰动居民幸福感的重要影响因素。大多数家庭都需要面对「买不买房、何时买房、在哪儿买房、买什么房」的艰难抉择&#xff0c;每一个问题的答案都在某种程度上与房价的波动息息相关。 近年来&#xff0c;我国各…

RocketMq源码解析九:刷盘机制及过期文件删除

一、刷盘机制 刷盘策略在不同时间进行刷写磁盘。RocketMQ的存储是基于JDK NIO的内存映射机制(MappedByteBuffer)的,消息存储首先将消息追加到内存,再根据配置的刷写磁盘 同步刷盘表示消息追加到内存后,立即将数据刷写到文件系统中。代码的调用链如下: submi…

【新版本来袭】ONLYOFFICE桌面编辑器8.1 —— 重塑办公效率与体验

文章目录 一、功能完善的PDF编辑器&#xff1a;重塑文档处理体验编辑文本插入和修改各种对象&#xff0c;如表格、形状、文本框、图像、艺术字、超链接、方程式等添加、旋转和删除页面添加文本注释和标注 二、幻灯片版式设计&#xff1a;创意展示的无限舞台三、改进从右至左显示…