广州商城建站系统,外贸网站建设网站,网站建设素材,公司网站 制作AJAX案例
图书管理
四大功能#xff1a;
展示图书删除图书编辑图书信息新增图书
步骤
1.bootstrap弹窗来实现新增和编辑图书时出现的弹窗
有两种方案#xff1a;
a.可以用自带的属性来进行弹窗的显示和隐藏
b.可以通过JS进行控制#xff0c;此操作可以进行自定义
展示图书删除图书编辑图书信息新增图书
步骤
1.bootstrap弹窗来实现新增和编辑图书时出现的弹窗
有两种方案
a.可以用自带的属性来进行弹窗的显示和隐藏
b.可以通过JS进行控制此操作可以进行自定义比如在隐藏窗口的同时获取表单元素并进行渲染页面
a方案
在想要进行隐藏和显示的按钮中增加自带的属性
b方案
//1.创建弹窗对象const box document.querySelector(.name-box);const modal new bootstrap.Modal(box);//2.绑定点击事件并调用相关显示和隐藏的函数//2.1获取需要绑定点击事件的对象document.querySelector(.edit-btn).addEventListener(click, () {modal.show();})document.querySelector(.save-btn).addEventListener(click, () {//获取表单信息并打印const data document.querySelector(.username).value;console.log(username, data);modal.hide();})2.渲染列表
a.获取数据
b.渲染数据
图片上传
步骤
获取图片文件 为input绑定change事件 使用FormData携带图片文件 – 由于传到服务器的数据需要是form-data所以需要进行转换而img为服务器接口指定的参数名提交到服务器获取图片url网址使用
两个知识点
获取input上传的文件数据e.target.files – 获取的是一个文件列表伪数组可以通过下标指定想要的数组提交到服务器的数据需要是表单数据则要通过FormData来实现对数据的包裹–const filedata new FormData(); filedata.append(img, e.target.files[0]);
代码
/*** 目标图片上传显示到网页上* 1. 获取图片文件* 2. 使用 FormData 携带图片文件* 3. 提交到服务器获取图片url网址使用*///1.1. 获取图片文件//为input绑定change事件document.querySelector(.upload).addEventListener(change, e {console.log(e.target.files[0]);//1.2 使用 FormData 携带图片文件 -- 由于传到服务器的数据需要是form-data所以需要进行转换而img为服务器接口指定的参数名const filedata new FormData();filedata.append(img, e.target.files[0]);//1.3 提交到服务器获取图片url网址使用axios({url: http://hmajax.itheima.net/api/uploadimg,method: POST,data: filedata}).then(result {console.log(result);const myimg document.querySelector(.my-img);const imgurl result.data.data.url;myimg.src imgurl;})})网页背景更换
步骤
选择图片上传获取文件数据并转换为表单数据格式提交到服务器并获取返回的url地址赋值给body的背景图style将url地址存储到本地以便下次访问网站的时候可以对body的背景图style进行赋值需要判断本地是否存储了数据
代码
/*** 目标网站-更换背景* 1. 选择图片上传设置body背景* 2. 上传成功时保存图片url网址* 3. 网页运行后获取url网址使用* */
//1.1为更换背景的表单元素绑定change事件
document.querySelector(.bg-ipt).addEventListener(change, e {console.log(e.target.files[0]);//将文件数据追加到新建的formdata中const Filedata new FormData();Filedata.append(img, e.target.files[0]);//将该表单数据上传到服务器axios({url: http://hmajax.itheima.net/api/uploadimg,method: POST,data: Filedata}).then(result {//获取返回的url地址console.log(result.data.data.url);//给body的背景图赋值const imgUrl result.data.data.url;document.body.style.backgroundImage url(${imgUrl});//将该url传入本地存储以便刷新后依旧可以对body背景图进行赋值localStorage.setItem(bgImg, imgUrl);})
})
//网页运行后通过本地存储进行背景图赋值但是要注意第一次进入网站时没有设置背景图
const imgUrl localStorage.getItem(bgImg);
console.log(imgUrl);
//判断是否存在imgUrl在进行赋值 通过逻辑与的逻辑中断特性imgUrl (document.body.style.backgroundImage url(${imgUrl})); //逻辑与的优先级高于“”
个人信息
步骤 信息渲染 向服务器获取对应个人的信息 根据服务器所给的数据与表单元素进行对比将数据进行渲染 每次网页运行都调用一次渲染函数从服务器获取数据并将数据渲染到对应标签中 头像修改 绑定change事件由于服务器要求将文件数据和外号都追加到一个新建的表单数据中向服务器进行提交获取url网址,对头像的src重新进行赋值 表单修改 为表单提交按钮绑定点击事件通过serialize快速获得表单信息根据服务器添加外号属性由于服务器要求的gender需要是数字型因此进行修改将修改的表单数据提交到服务器重新调用渲染函数 操作成功提示 获取提示框标签并使用bootstrap内置的对象调用show()方法
新的方法
提示框对象Toastbootstrap中的一个对象需要在标签中内置类名toast并且引入bootstrap相关的JavaScript文件
语法
//html中的提示框
!-- toast 提示框 --div classtoast my-toast data-bs-delay1500div classtoast-bodydiv classalert alert-success info-box操作成功/div/div/div//js中的运用操作何时调用show()方法//获取提示框标签并使用bootstrap内置的对象const tiptoastDom document.querySelector(.my-toast);const tiptoast new bootstrap.Toast(tiptoastDom);//调用show()方法tiptoast.show();代码
/*** 目标1信息渲染* 1.1 获取用户的数据* 1.2 回显数据到标签上* */
//封装一个渲染函数在运行的时候进行调用以及修改头像或者表单元素内容的时候进行调用
//将外号作为一个常量进行声明避免反复向服务器进行操作写错外号
const creator 老吴;
function painthtml() {//向服务器获取对应个人的信息axios({url: http://hmajax.itheima.net/api/settings,method: GET,params: {creator}}).then(result {console.log(result.data.data);//将数据进行渲染const objData result.data.data;Object.keys(objData).forEach(key {//根据服务器所给的数据与表单元素进行对比//如果当前的属性名为avatar对头像的src属性进行赋值if (key avatar) {document.querySelector(.prew).src objData[key];} else if (key gender) {//如果当前值为gender对单选框进行赋值//获取单选框对象const whatGender document.querySelectorAll(.gender);//由于服务器给的规则是0男1女刚好和下标位置相符因此可以直接通过下标直接赋值whatGender[objData[key]].checked true;} else {//其他表单元素无需进行特殊操作进行对其内容进行赋值document.querySelector(.${key}).value objData[key];}})})}
//每次网页运行都调用一次渲染函数从服务器获取数据并将数据渲染到对应标签中
painthtml();/*** 目标2头像切换* 2.1 为对应表单元素绑定change事件* 2.2 获取表单中的文件数据并按服务器的格式将数据传给服务器* 2.3 将返回的url地址赋值给对应的标签进行赋值操作* *///绑定change事件
const imgFile document.querySelector(.upload);
imgFile.addEventListener(change, e {console.log(e.target.files);//由于服务器要求将文件数据和外号都追加到一个新建的表单数据中const formdata new FormData();formdata.append(avatar, e.target.files[0]);formdata.append(creator, creator);//向服务器进行提交axios({url: http://hmajax.itheima.net/api/avatar,method: PUT,data: formdata}).then(result {//获取url网址console.log(result.data.data.avatar);document.querySelector(.prew).src result.data.data.avatar;})
})//快速获取表单元素内容
// const form document.querySelector(.user-form);
// const formdata serialize(form, { hash: true, empty: true });
// const { avatar, desc, email, gender, nickname } formdata; //对对象进行结构/*** 目标2表单修改* 2.1 为对应表单元素绑定change事件* 2.2 获取表单中的文件数据并按服务器的格式将数据传给服务器* 2.3 将返回的url地址赋值给对应的标签进行赋值操作* */
//为表单提交按钮绑定点击事件
document.querySelector(.submit).addEventListener(click, () {//通过serialize快速获得表单信息const form document.querySelector(.user-form);const formdata serialize(form, { hash: true, empty: true });//根据服务器添加外号属性formdata.creator creator;//由于服务器要求的gender需要是数字型因此进行修改formdata.gender formdata.gender;console.log(formdata);//将修改的表单数据提交到服务器axios({url: http://hmajax.itheima.net/api/settings,method: PUT,data: formdata}).then(result {console.log(result);//目标4 提示框提示操作成功//获取提示框标签并使用bootstrap内置的对象const tiptoastDom document.querySelector(.my-toast);const tiptoast new bootstrap.Toast(tiptoastDom);//调用show()方法tiptoast.show();//重新渲染页面painthtml();})
})
