Node学习（九）032-管理系统之修改英雄——ajax请求数据之post请求写法-$.ajax() 方法 & 图片预览之URL.createObjectURL(文件对象) & 服务端post接口写法

Node学习（九）032-管理系统之修改英雄——ajax请求数据之post请求写法-$.ajax() 方法 & 图片预览之URL.createObjectURL(文件对象) & 服务端post接口写法

5.3 前端：点击保存，发送ajax请求，实现更新

代码和添加时前端的代码一样。只是修改了保存按钮的类名和接口的名字。

// 当点击“保存”按钮的时候，要阻止默认行为，然后使用FormData收集表单各项数据。 // 然后将数据通过 $.ajax() 方法提交给接口 /updateHero （注：接口我们自定，目前还没有）。 $('.btn-save').click(function (e) { 
    e.preventDefault(); //阻止表单提交 // 收集表单数据 var fd = new FormData($('form')[0]); // 发生ajax请求 $.ajax({ 
    contentType: false, processData: false, type: 'POST', url: '/updateHero', data: fd, dataType: 'json', success: function (res) { 
    // 预期的res ===== {"code": 200, "message": "修改英雄成功"} // 无论成功还是失败，都提示 alert(res.message); if (res.code === 200) { 
    // 修改成功，跳转到index.html location.href = '/index.html'; } } }); }); 

图片预览的代码，和添加时预览的代码相同：只是修改了 #yulan 为 .preview:

 完成图片预览 // 当上传控件（文件域）的内容发生改变的时候，完成预览 $('#heroIcon').change(function () { 
    // 1. 生成一个临时的url // var url = URL.createObjectURL(文件对象); // console.dir(this); var objFile = this.files[0]; var url = URL.createObjectURL(objFile); console.log(url); // 2. 改变“盖伦”那个图片的src为临时的url即可 $('.preview').attr('src', url); }); 

执行 git add . 和 git commit -m '修改英雄的时候，前端完成图片预览和点击保存的时候发送ajax请求'

前面设置表单数据的时候，忘记添加id隐藏域了，现在补充：

执行 git add . 和 git commit -m '在修改的表单中加入id隐藏域'

5.4 服务端：完成更新的接口

接口和addHero接口差不多。这里修改了SQL语句，另外要判断修改的时候是否要更新头像。

// 4. 完成更新的接口 app.post('/updateHero', upload.single('heroIcon'), (req, res) => { 
    // 使用body-parser是不能接受到form-data类型的数据的。因为提交的数据的编码格式为 multipart/form-data // 需要使用新的模块，叫做 multer // upload.single('heroIcon')。里面的 heroIcon 是表单中文件域的 name值 // console.log(req.file); // 包含图片信息 // console.log(req.body); // 包含文本信息，比如英雄的名字、昵称、技能等 // 后续，写SQL语句，完成添加即可 let sql = 'update heroes set ? where id = ?'; let values = { 
    // 字段: 值 name: req.body.heroName, nickname: req.body.heroNickName, skill: req.body.skillName }; // 针对file要单独判断 // console.log(req.file); // 如果更新的时候，用户没有选择新的头像，则req.file === undefined if (req.file !== undefined) { 
    // 说明更新的时候，选择了头像 values.file = req.file.path; } // return; db(sql, [values, req.body.id], (err, result) => { 
    if (err) { 
    // res.send(可以填js对象); // 在响应数据的时候，send方法会将对象转成json res.send({ 
   code: 201, message: '更新失败'}); } else { 
    res.send({ 
   code: 200, message: '更新成功'}); } }); }); 

执行 git add . 和 git commit -m '完成更新接口'

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10833.html