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 '完成更新接口'