ajax day2
1、
2、控制弹框显示和隐藏:

3、右键tr,编辑为html,可直接复制tr部分的代码


4、删除时,点击删除按钮,可以获取图书id:


5、编辑图书
快速赋值表单元素内容,用于回显:

6、hidden

7、案例 个人信息设置

js代码部分:
/*** 目标1:信息渲染* 1.1 获取用户的数据* 1.2 回显数据到标签上* */
// 1
const creator = '播仔'
axios({url: 'http://hmajax.itheima.net/api/settings',params: {// 对象中 es6简写 属性名和变量名相同creator}
}).then(result => {// console.log(result)// 播仔相关信息对象obj = result.data.data// item为字符串形式Object.keys(obj).forEach(item => {//avatar 存头像路径// console.log(item)if (item == 'avatar') {document.querySelector('.prew').src = obj[item]// 性别} else if (item === 'gender') {// genderList为一个伪数组 0男,1女const genderList = document.querySelectorAll('.gender')const num = obj[item]// 勾选上此单选框genderList[num].checked = true} else {document.querySelector(`.${item}`).value = obj[item]}})})
// 2
// file的change事件 更换图片
document.querySelector('.upload').addEventListener('change', e => {// e.target.files得fileList对象// 只选中一张图片 故e.target.files[0]为一个file对象const fd = new FormData()fd.append('avatar', e.target.files[0])fd.append('creator', creator)// 提交到服务器上axios({url: 'http://hmajax.itheima.net/api/avatar',method: 'PUT',data: fd}).then(result => {console.log(result)//更新头像路径 result.data.data.avatar为图片在服务器中的路径document.querySelector('.prew').src = result.data.data.avatar})
})
// 3
document.querySelector('.submit').addEventListener('click', () => {const formData = document.querySelector('.user-form')const userObj = serialize(formData, { hash: true, empty: true })// console.log(userObj)// 字符串转数字类型userObj.gender = + userObj.genderuserObj.creator = creator// 将修改的个人信息提交到服务器axios({url: 'http://hmajax.itheima.net/api/settings',method: 'PUT',data: userObj}).then(result => {// console.log(result)// 修改信息成功 显示提示框const toastDom = document.querySelector('.my-toast')// 创建提示框对象 构造函数 new实例化const toast = new bootstrap.Toast(toastDom)toast.show()})
})
// // // 1.1 获取用户的数据
// axios({
// url: 'http://hmajax.itheima.net/api/settings',
// params: {
// creator
// }
// }).then(result => {
// const userObj = result.data.data
// // 1.2 回显数据到标签上
// Object.keys(userObj).forEach(key => {
// if (key === 'avatar') {
// // 赋予默认头像
// document.querySelector('.prew').src = userObj[key]
// } else if (key === 'gender') {
// // 赋予默认性别
// // 获取性别单选框:[男radio元素,女radio元素]
// const gRadioList = document.querySelectorAll('.gender')
// // 获取性别数字:0男,1女
// const gNum = userObj[key]
// // 通过性别数字,作为下标,找到对应性别单选框,设置选中状态
// gRadioList[gNum].checked = true
// } else {
// // 赋予默认内容
// document.querySelector(`.${key}`).value = userObj[key]
// }
// })
// })// /**
// * 目标2:修改头像
// * 2.1 获取头像文件
// * 2.2 提交服务器并更新头像
// * */
// // 文件选择元素->change事件
// document.querySelector('.upload').addEventListener('change', e => {
// // 2.1 获取头像文件
// console.log(e.target.files[0])
// const fd = new FormData()
// fd.append('avatar', e.target.files[0])
// fd.append('creator', creator)
// // 2.2 提交服务器并更新头像
// axios({
// url: 'http://hmajax.itheima.net/api/avatar',
// method: 'PUT',
// data: fd
// }).then(result => {
// const imgUrl = result.data.data.avatar
// // 把新的头像回显到页面上
// document.querySelector('.prew').src = imgUrl
// })
// })// /**
// * 目标3:提交表单
// * 3.1 收集表单信息
// * 3.2 提交到服务器保存
// */
// /**
// * 目标4:结果提示
// * 4.1 创建toast对象
// * 4.2 调用show方法->显示提示框
// */
// 保存修改->点击
// document.querySelector('.submit').addEventListener('click', () => {
// // 3.1 收集表单信息
// const userForm = document.querySelector('.user-form')
// const userObj = serialize(userForm, { hash: true, empty: true })
// console.log(userObj)
// userObj.creator = creator
// // 性别数字字符串,转成数字类型
// userObj.gender = +userObj.gender
// console.log(userObj)
// // 3.2 提交到服务器保存
// axios({
// url: 'http://hmajax.itheima.net/api/settings',
// method: 'PUT',
// data: userObj
// }).then(result => {
// // 4.1 创建toast对象
// const toastDom = document.querySelector('.my-toast')
// const toast = new bootstrap.Toast(toastDom)// // 4.2 调用show方法->显示提示框
// toast.show()
// })
// })
相关文章:
ajax day2
1、 2、控制弹框显示和隐藏: 3、右键tr,编辑为html,可直接复制tr部分的代码 4、删除时,点击删除按钮,可以获取图书id: 5、编辑图书 快速赋值表单元素内容,用于回显: 6、hidden …...
互联网摸鱼日报(2023-09-04)
互联网摸鱼日报(2023-09-04) 36氪新闻 腾讯游戏的棋中妙手 逐一解读北交所8大改革组合拳 本周双碳大事:全国碳市场清缴履约工作全面展开;宁德时代在成都成立新能源研究院;我国首个万吨级光伏发电直接制绿氢项目投产 你在上海 city walk&a…...
UG\NX CAM二次开发 遍历组中的工序 UF_NCGROUP_ask_member_list
文章作者:代工 来源网站:NX CAM二次开发专栏 简介: UG\NX CAM二次开发 遍历组中的工序 UF_NCGROUP_ask_member_list 效果: 代码: void GetAllOperTag(tag_t groupTag, vector<tag_t> &vOperTags) {int count=0;tag_t * list;UF_NCGROUP_ask_member_li…...
适配器、装饰器模式
一、装饰器模式 向一个现有的对象增加其功能而不改变其结构,属于类的包装...
Netty服务端启动的整体流程-基于源码4.1.96Final分析
Netty采用的是主从Reactor多线程的模型,参考Scalable IO in Java,但netty的subReactor为一个组 一、从FileServer服务器示例入手 public final class FileServer {static final boolean SSL System.getProperty("ssl") ! null;// Use the …...
预训练Bert添加new token的问题
问题 最近遇到使用transformers的AutoTokenizer的时候,修改vocab.txt中的[unused1]依然无法识别相应的new token。 实例: 我将[unused1]修改为了[TRI],句子中的[TRI]并没有被整体识别,而是识别为了[,T,RI,]。这明显是有问题的。…...
非常典型和高效的枚举类写法
目录 1、讲讲好处 2、例子 (1)枚举类: (2)DTO类: 3、根据上面例子进行具体讲解 1、讲讲好处 在使用这种标准枚举模式编写业务逻辑时,可以直接通过枚举成员来表示状态,不需要担心底层的 value 或描述信…...
kafka-- kafka集群环境搭建
kafka集群环境搭建 # 准备zookeeper环境 (zookeeper-3.4.6) # 下载kafka安装包 https://archive.apache.org/dist/kafka/2.1.0/kafka_2.12-2.1.0.tgz # 上传 : 172.16.144.133 cd /usr/local/softwaretar -zxvf /usr/local/software/kafka_2.12-2.1.0.tgz -C /usr/local…...
3.flask-sqlalchemy ORM库
介绍 Flask-SQLAlchemy是一个用于Flask的扩展,它提供了一个便捷的方式来处理数据库操作。Flask-SQLAlchemy基于SQLAlchemy,一个功能强大的Python SQL工具包和对象关系映射(ORM)系统 官网文档:http://www.pythondoc.com/flask-sql…...
mac 安装 homebrew
摘要: 本文主要是下载安装包安装homebrew,然后配置环境变量Path。检验是否安装成功。 homebrew地址:macOS(或 Linux)缺失的软件包的管理器 — Homebrew 在终端命令下载安装: /bin/bash -c "$(curl…...
R语言应用interactionR包进行亚组相加交互作用分析
在统计分析中交互作用是指某因素的作用随其他因素水平变化而变化,两因素共同作用不等于两因素单独作用之和(相加交互作用)或之积(相乘交互作用)。相互作用的评估是尺度相关的:乘法或加法。乘法尺度上的相互作用意味着两次暴露的综合效应大于(…...
mysql 数据库面试题整理
Mysql 中 MyISAM 和 InnoDB 的区别 1、InnoDB 支持事务MyISAM 不支持 2、InnoDB 支持外键MyISAM 不支持 3、InnoDB 是聚集索引,MyISAM 是非聚集索引 4、InnoDB 不保存表的具体行数 5、InnoDB 最小的锁粒度是行锁,MyISAM是表锁 mysql中有就更新…...
LeetCode-435-无重叠区间
题目链接: 力扣435 -无重叠区间 解题思路:和之前的合并区间、汇总区间都比较相似, 先对二维数组排序,按照左边界升序;当 当前区间的左区间 < 前一个区间的右区间,说明有重叠,res1,还要更新当…...
记录深度学习常用指令(一)
一、创建Conda虚拟Python环境 conda create -n [仓库名字] python[版本]二、激活环境 conda activate [仓库名字]三、安装PyTorch PyTorch官方 GPU: conda install pytorch1.11.0 torchvision0.12.0 torchaudio0.11.0 cudatoolkit11.3 -c pytorchCPU࿱…...
Shell脚本练习——系统应用相关
显示系统信息 [rootwenzi data]#cat systemInfo.sh #/bin/bash RED"\E[1;31m" GREEN"\E[1;32m" END"\E[0m" echo -e "$GREEN----------------------Host systeminfo--------------------$END" echo -e "HOSTNAME: $REDho…...
同创永益入选首批“金融数字韧性与混沌工程实践试点机构”
8月16日下午,由北京国家金融科技认证中心、北京国家金融标准化研究院联合主办的“传递信任 服务发展”金融科技标准认证生态大会在太原成功举办。中国金融电子化集团有限公司党委书记、董事长周逢民,中国科学院院士冯登国,中国工商银行首席技…...
Hive 表注释乱码解决
文章目录 出现原因MySQL 字符集修改调整元数据库字符集测试 出现原因 一般 Hive 的元数据信息都存储在 MySQL 中,但 MySQL 数据库中的 character_set_server 和 character_set_database 参数,默认都为 latin1 字符集,这两个参数决定了服务器…...
【搭建私人图床】使用LightPicture开源搭建图片管理系统并远程访问
文章目录 1.前言2. Lightpicture网站搭建2.1. Lightpicture下载和安装2.2. Lightpicture网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 现在的手机越来越先进,功能也越来越多,而手机…...
Ubuntu入门04——目录与文件
目录 1.显示当前工作目录 2.更改目录 3.创建工作目录 4.删除工作目录 5.移动文件或者文件夹 6.文件夹and文件查看命令 7. 回到根目录,回到上一级 8.删除工作目录 9.查看目录和文件 10.以树状图列出目录内容 11.文件查找 12.在数据库中查找文件或目录 1…...
深度学习中有哪些超参数,都有什么作用
深度学习中有许多超参数需要设置,它们会对模型的性能和训练过程产生重要影响。以下是一些常见的超参数及其作用: 学习率(Learning Rate):控制参数更新的步长。较小的学习率可以使模型收敛更稳定,但可能需要…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码: https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
