【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…

配置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,看看 这里提示我们可以上传图片或压缩包&…

Unity 解包工具(AssetStudio/UtinyRipper)

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

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))…

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:该字段存储了…

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 请求处…

Java 汉诺塔问题 详细分析

汉诺塔 汉诺塔&#xff08;Tower of Hanoi&#xff09;&#xff0c;又称河内塔&#xff0c;是一个源于印度古老传说的益智玩具。大梵天创造世界的时候做了三根金刚石柱子&#xff0c;在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘。大梵天命令婆罗门把圆盘从下面开始按大小…

vulnhub靶场ai-web 2.0

1 信息收集 1.1 主机发现 arp-scan -l 主机地址为192.168.1.4 1.2 服务端口扫描 nmap -sS -sV -A -T5 -p- 192.168.1.4 开放22&#xff0c;80端口 2 访问服务 2.1 80端口访问 http://192.168.1.4:80/ 先尝试admin等其他常见用户名登录无果 然后点击signup发现这是一个注…

prescan软件中导入路径文件txt/lpx

由于博主收到的是lpx格式的路径文件&#xff0c;因此&#xff0c;第一步 1.记事本打开 ctrla 全选 ctrlc 复制 2.新建一个excel 鼠标定位到第一行第一列的格子 ctrlv 复制 3.数据栏“分列”功能 4. (0.1递增的数列&#xff0c;纬度&#xff0c;经度&#xff0c;高程) 导入…

JDBC操作流程

目录 简介 具体操作 1. 引入驱动包 1&#xff09;下载驱动包 2&#xff09;引入驱动包到项目中 2. 编写代码 1&#xff09;创建数据源 2&#xff09;建立连接 3&#xff09;构造 SQL 语句 4&#xff09;执行 SQL 语句 5&#xff09;释放资源 总结 简介 JDBC 就是使…

某网页gpt的JS逆向

原网页网址 (base64) 在线解码 aHR0cHM6Ly9jbGF1ZGUzLmZyZWUyZ3B0Lnh5ei8 逆向效果图 调用代码&#xff08;复制即用&#xff09; 把倒数第三行换成下面的base64解码 aHR0cHM6Ly9jbGF1ZGUzLmZyZWUyZ3B0Lnh5ei9hcGkvZ2VuZXJhdGU import hashlib import time import reques…

C语言+ MSSQL技术开发的 PACS系统源码:CT后处理技术之仿真内镜CTVE

C语言 MSSQL技术开发的 PACS系统源码&#xff1a;CT后处理技术之仿真内镜CTVE 仿真内窥镜VE VE是利用医学影像作为原始数据&#xff0c;融合图像处理、计算机图形学、科学计算可视化、虚拟现实技术&#xff0c;模拟传统光学内镜的一种技术。 又叫做腔内重建技术&#xff0c;是…

试用笔记之-汇通来电显示软件

首先汇通来电显示软件下载 http://www.htsoft.com.cn/download/httelephone.rar

平衡树专题Splay

写在前面&#xff1a; 部分来自孙宝&#xff08;Steven24&#xff09;的博客&#xff0c;表示感谢。 认识 什么是Splay 就是BST的一种&#xff0c;整体效率是很高的&#xff0c;均摊的次数是O(logn)级别的。 基本操作就是把节点旋转到BST的root&#xff0c;从而改善BST的平…