【ajax实战06】进行文章发布

本文章目标:收集文章内容,并提交服务器保存

一:基于form-serialize插件收集表单数据

form-serialize插件仅能收集到表单数据,除此之外的数据无法收集到

二:基于axios提交到服务器保存

三:调用alert警告框反馈结果给用户

alert警告框部分是调用之前封装好的js库,利用到了封装函数思想

function myAlert(isSuccess, msg) {const alert = document.querySelector('.alert')alert.classList.add(isSuccess ? 'alert-success' : 'alert-danger')alert.innerHTML = msgalert.classList.add('show')setTimeout(() => {alert.classList.remove(isSuccess ? 'alert-success' : 'alert-danger')alert.innerHTML = ''alert.classList.remove('show')}, 1500);
}

四:重置表单并跳转到列表页

// 3.1 基于 form-serialize 插件收集表单数据对象
document.querySelector('.send').addEventListener('click', async e => {if (e.target.innerHTML !== '发布') returnconst form = document.querySelector('.art-form')const data = serialize(form, { hash: true, empty: true })// 发布文章的时候,不需要 id 属性,所以可以删除掉(id 为了后续做编辑使用)delete data.idconsole.log(data)// 自己收集封面图片地址并保存到 data 对象中data.cover = {type: 1, // 封面类型images: [document.querySelector('.rounded').src] // 封面图片 URL 网址}// 3.2 基于 axios 提交到服务器保存try {const res = await axios({url: '/v1_0/mp/articles',method: 'POST',data: data})// 3.3 调用 Alert 警告框反馈结果给用户myAlert(true, '发布成功')// 3.4 重置表单并跳转到列表页form.reset()// 封面需要手动重置document.querySelector('.rounded').src = ''document.querySelector('.rounded').classList.remove('show')document.querySelector('.place').classList.remove('hide')// 富文本编辑器重置editor.setHtml('')setTimeout(() => {location.href = '../content/index.html'}, 1500)} catch (error) {myAlert(false, error.response.data.message)}
})

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

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

相关文章

基于KMeans的航空公司客户数据聚类分析

💐大家好!我是码银~,欢迎关注💐: CSDN:码银 公众号:码银学编程 实验目的和要求 会用Python创建Kmeans聚类分析模型使用KMeans模型对航空公司客户价值进行聚类分析会对聚类结果进行分析评价 实…

Linux修炼之路之进程概念,fork函数,进程状态

目录 一:进程概念 二:Linux中的进程概念 三:用getpid(),getppid()获取该进程的PID,PPID 四:用fork()来创建子进程 五:操作系统学科的进程状态 六:Linux中的进程状态 接下来的日子会顺顺利利&#xf…

【区块链+基础设施】深证金融区块链平台 | FISCO BCOS应用案例

作为数据交换密集型行业,资本市场是区块链创新应用的重要领域,区块链技术可以有效解决诸多痛点问题。比 如,针对信息不对称的问题,区块链技术通过将整个企业的经营活动信息上链,有效降低尽调成本,为投融资决…

配置windows环境下独立浏览器爬虫方案【不依赖系统环境与chrome】

引言 由于部署浏览器爬虫的机器浏览器版本不同,同时也不想因为部署了爬虫导致影响系统浏览器数据,以及避免爬虫过程中遇到的chrome与webdriver版本冲突。我决定将特定版本的chrome浏览器与webdriver下载到项目目录内,同时chrome_driver在初始…

我使用 GPT-4o 帮我挑西瓜

在 5 月 15 日,OpenAI 旗下的大模型 GPT-4o 已经发布,那时网络上已经传开, 但很多小伙伴始终没有看到 GPT-4o 的体验选项。 在周五的时候,我组建的 ChatGPT 交流群的伙伴已经发现了 GPT-4o 这个选项了,是在没有充值升…

NSSCTF-Web题目21(文件上传-phar协议、RCE-空格绕过)

目录 [NISACTF 2022]bingdundun~ 1、题目 2、知识点 3、思路 [FSCTF 2023]细狗2.0 4、题目 5、知识点 6、思路 [NISACTF 2022]bingdundun~ 1、题目 2、知识点 文件上传,phar伪协议 3、思路 点击upload,看看 这里提示我们可以上传图片或压缩包&…

应对.Kastaneya勒索病毒:保护您的数据安全

导言: 随着科技的发展,网络安全问题也日益严峻。最近,一种名为.Kastaneya的勒索病毒开始在网络上出现,对用户的计算机和数据造成严重威胁。本文91数据恢复将介绍.Kastaneya勒索病毒的特点及其传播方式,并提供一些有效…

Unity 解包工具(AssetStudio/UtinyRipper)

文章目录 1.UtinyRipper2.AssetStudio 1.UtinyRipper 官方地址: https://github.com/mafaca/UtinyRipper/ 下载步骤: 2.AssetStudio 官方地址: https://github.com/Perfare/AssetStudio 下载步骤:

【HarmonyOS NEXT】鸿蒙多线程Sendable开发

非共享模块在同一线程内只加载一次,在不同线程间会加载多次,单例类也会创建多次,导致数据不共享,在不同的线程内都会产生新的模块对象。 基础概念 Sendable协议 Sendable协议定义了ArkTS的可共享对象体系及其规格约束。符合Sen…

STM32mp157aaa按键中断实验

效果图&#xff1a; 源码&#xff1a; #include "key.h" void hal_key1_rcc_gpio_init() {// 使能GPIOF组RCC->MP_AHB4ENSETR | (0x1 << 5);// 设置引脚位输入模式GPIOF->MODER & (~(0X3 << 18));GPIOF->MODER & (~(0X3 << 16))…

[C++11] 退出清理函数(quick_exit at_quick_exit)

说明&#xff1a;在C11中&#xff0c;quick_exit和at_quick_exit是新增的快速退出功能&#xff0c;用于在程序终止时提供一种快速清理资源的方式。 quick_exit std::quick_exit函数允许程序快速退出&#xff0c;并且可以传递一个退出状态码给操作系统。与std::exit相比&#…

[今日一水]论坛该如何选择

想要搭建一个论坛其实选择是很多的&#xff0c;就比如国内的dz&#xff0c;国外的xenforo和flarum&#xff0c;具体还是根据的面向的用户和需求来&#xff0c;就比如flarum它的界面肯定是三个论坛里最现代化的&#xff0c;但是xenforo社区生态很强&#xff0c;而dz对于国内用户…

VMware创建新虚拟机教程(保姆级别)

&#x1f4e2; 续上一篇 最新超详细VMware虚拟机安装完整教程-CSDN博客 &#xff0c;本章将详细讲解VMware创建虚拟机。 一、创建新的虚拟机 点击【创建新的虚拟机】&#xff01; 点击【自定义&#xff08;高级&#xff09;】> 下一步&#xff01; > 默认下一步&#x…

耐克:老大的烦恼

股价暴跌20%&#xff0c;老大最近比较烦。 今天说说全球&#xff08;最&#xff09;大运动品牌——耐克。 最近耐克发布2023-2024财年业绩&#xff08;截止于2024.5.31&#xff09;&#xff0c;还是爆赚几百亿美元&#xff0c;还是行业第一&#xff0c;但业绩不及预期&#xf…

Redis为什么设计多个数据库

​关于Redis的知识前面已经介绍过很多了,但有个点没有讲,那就是一个Redis的实例并不是只有一个数据库,一般情况下,默认是Databases 0。 一 内部结构 设计如下: Redis 的源码中定义了 redisDb 结构体来表示单个数据库。这个结构有若干重要字段,比如: dict:该字段存储了…

backbone是什么?

在深度学习中&#xff0c;特别是计算机视觉领域&#xff0c;"backbone"&#xff08;骨干网络&#xff09;是指用于提取特征的基础网络。它通常是卷积神经网络&#xff08;CNN&#xff09;&#xff0c;其任务是从输入图像中提取高层次特征&#xff0c;这些特征然后被用…

【第12章】MyBatis-Plus条件构造器(下)

文章目录 前言一、使用 TypeHandler二、使用提示三、Wrappers四、线程安全性五、使用 Wrapper 自定义 SQL1.注意事项2.示例3. 使用方法 总结 前言 本章继续上章条件构造器相关内容。 一、使用 TypeHandler 在 wrapper 中使用 typeHandler 需要特殊处理利用 formatSqlMaybeWit…

scikit-learn教程

scikit-learn&#xff08;通常简称为sklearn&#xff09;是Python中最受欢迎的机器学习库之一&#xff0c;它提供了各种监督和非监督学习算法的实现。下面是一个基本的教程&#xff0c;涵盖如何使用sklearn进行数据预处理、模型训练和评估。 1. 安装和导入包 首先确保安装了…

【漏洞复现】D-Link NAS 未授权RCE漏洞(CVE-2024-3273)

0x01 产品简介 D-Link 网络存储 (NAS)是中国友讯&#xff08;D-link&#xff09;公司的一款统一服务路由器。 0x02 漏洞概述 D-Link NAS nas_sharing.cgi接口存在命令执行漏洞&#xff0c;该漏洞存在于“/cgi-bin/nas_sharing.cgi”脚本中&#xff0c;影响其 HTTP GET 请求处…

类和对象-友元-全局函数做友元

全局函数做友元 #include<iostream> using namespace std;class Building {//goodGay全局函数是Building好朋友&#xff0c;可以访问Building的私有成员 friend void goodGay(Building *building); public:Building(){m_SittingRoom "客厅";m_BedRoom &qu…