2019-11-30
在做英雄管理器这个案例的时候，一定要先写好需求分析：
一、写出要实现什么功能，需要做什么交互（也就是要做什么事件）
例如这个案例里面 在首页页面要实现： 1、当页面一加载后就查询了所有的数据 2、点击删除按钮事件
在添加数据的页面要实现： 3.文件的预览（固定格式) 4.点击新增按钮文件的提交上传(固定格式）跳转
在编辑数据页面要实现：5.点击编辑按钮编辑页面上显示对应的英雄数据信息 6.文件的预览 7.点击保存按钮文件的提交上传 保存跳转
二、实现这个交互事件后，具体要怎么一步步实现
1.1 ajax发送请求，获得服务器返回回来的数据（JS对象）
1.2 将返回之后的数据 通过模板引擎渲染到页面上
2.1 为这个删除按钮注册点击事件，这里会遇到一个问题(注意点)，我们所点的这个删除按钮是通过ajax请求的回来动态添加，所以我们要用 事件的委托：给这个点击的按钮的父级元素 注册点击事件，委托者为这个按钮（$(‘点击按钮的父亲元素’).on('click',‘点击的按钮’，function(){})
2.2 获取这个所点击按钮对应的id： 这里也会遇到一个问题(注意点)：ajax返回回来的数据里有对应的英雄的id名，我们要获取这个id的话，就要通过自定义属性data-id来存储这个id，把这个自定义类名写在模板引擎的英雄列表对应的编辑按钮里，让他的值 为{{ v.id }} 获取了ajax返回回来的id ，然后点击哪一个编辑按钮就能通过attr获取当前的id $(this).attr(‘data-id’） 这里要提醒一下：css操作的是css样式属性 ，attr操作的是html属性 和 自定义属性
2.3 ajax发送删除请求，发送id给服务器，服务器返回相应的数据 当状态码为204时 删除成功，刷新页面
if (backData.code == 204) { alert('删除成功'); //刷新 window.location.reload(); }
文件预览： 3.1 给file表单注册 onchange事件 (只要用户选择了文件就会执行)
$('#heroIcon').change(function () {
//1.2 获取用户选择的图片
var file = this.files[0];
//1.3 将文件转为src路径
var url = URL.createObjectURL(file);
//1.4 将url路径赋值给img标签的src
$('.preview').attr('src', url);
});文件提交上传： 4. ***文件上传一定要使用formData处理文件
$('.btn-add').on('click',function(e){
//禁用表单默认提交事件
e.preventDefault();
console.log('点击新增按钮');
//创建FormData对象：参数是表单dom对象($('form')[0]通常下标取第一个元素的)
var fd = new FormData($('form')[0])
$.ajax({
url:'http://127.0.0.1:4399/hero/add',
type:'post',
dataType:'json',
data:fd,
contentType: false,
processData: false,
success: function(backData){
console.log(backData);
if(backData.code==201)
alert('新增成功');
window.location.href = './index.html';
}
});
}); <button onclick="location.href='./edit.html?id={{ v.id}}'" class="btn btn-primary">编辑</button>var id = window.location.href.split('=')[1];5.2 ajax发送请求英雄详情 根据id获取点击的英雄信息
$.ajax({ url:'http://127.0.0.1:4399/hero/id', type:'get', dataType:'json', data:{id:id}, success: function(backData){ console.log(backData); //数据返回之后 渲染页面 $('#heroName').val(backData.data.name); $('#skillName').val(backData.data.skill); $('.preview').attr('src',backData.data.icon);// 添加图片预览 // $('#heroId').val(id);// input隐藏域 获取id } });
5.3 文件预览 格式跟过程3类似
//1.给file表单元素注册onchange事件 $('#heroIcon').change(function () { //1.2 获取用户选择的图片 var file = this.files[0]; //1.3 将文件转为src路径 var url = URL.createObjectURL(file); //1.4 将url路径赋值给img标签的src $('.preview').attr('src', url); });
5.4 文件提交上传
$('.btn-save').on('click',function(e){
//禁用表单默认提交事件
e.preventDefault();
//创建FormData对象：参数是表单dom对象 jq对象转成dom对象 通常取第一个元素的下标
var fd = new FormData($('form')[0]);
// 如果不传id的话会 出现400的错误 传参错误
// 通过 append 主动添加 id
fd.append('id',id);
$.ajax({
url:'http://127.0.0.1:4399/hero/update',
type:'post',
dataType:'json',
data:fd,
contentType: false,
processData: false,
success: function(backData){
console.log(backData);
if (backData.code==202) {
alert('修改成功,已保存');
window.location.href = './index.html';
}
}
});
});这里我们会 遇到一个问题 (注意点): 服务器会提示有一个参数没有传,这样类似问题的解决方法: 分析原因: FormData只能获取表单元素,不能获取id值,所以解决问题方案从两方面入手:(1)要么手动主动添加一个参数, 使用append的主动给fd(FormData对象)添加 (这个最常用) fd.append('id',id); (2)要么就在表单中添加一个input隐藏域,
<!-- 隐藏input ： 用户看不见，但是formdata可以获取到 --> <input type="hidden" id="heroId" name="id" /> //写在html表单中 $('heroId').val(id); //放在ajax请求英雄详情中渲染页面中 见5.2
leoragelovexer