Node学习（九）031-管理系统之修改英雄——服务端get接口写法之req.query可以获取到url上所有的参数 & ajax请求数据之get请求写法

Node学习（九）031-管理系统之修改英雄——服务端get接口写法之req.query可以获取到url上所有的参数 & ajax请求数据之get请求写法

五、修改英雄

分析：

• 在index.html 中，给“编辑”挂超链接，链接到edit.html。并且要挂id参数

5.1 服务端：完成响应一个英雄的接口

链接和接口数据

app.js中，完成接口：

// 3. 根据id，获取一个英雄
/**
 * 浏览器在请求这个接口的时候，必须要传递id参数
 */
app.get('/getHeroById', (req, res) => {
    
    
    // 服务器端，首先要获取url中的id参数的值。req.query可以获取到url上所有的参数
    // console.log(req.query); // { id: '3', age: '24' }
    let id = req.query.id;
    if (!id || isNaN(id)) {
    
    
        res.send('参数错误');
        return;
    }
    // 如果id没有问题，则根据id查询一个英雄
    db('select * from heroes where id=?', id, (err, result) => {
    
    
        if (err) throw err;
        // result 的值是一个数组 ： [{"id":3,"name":"嘉文四世","nickname":"德玛西亚皇子","file":null,"skill":null,"age":22,"sex":"男"}]
        res.send(result[0]);
    });
});

获取接口数据成功

执行 git add . 和 git commit -m '完成一个根据id获取英雄的接口'

5.2 前端：页面刷新，请求一个英雄

单条数据

edit.html中。发送ajax请求到 getHeroById接口。将获取到的英雄的数组渲染到页面中：

// 页面刷新，先获取地址栏的id
    var id = location.search; // ?id=3
    $.get('/getHeroById' + id, function (res) {
    
    
      // res 是 一个对象
      // 挨个设置input的value
      $('#heroName').val(res.name);
      $('#heroNickName').val(res.nickname);
      $('#skillName').val(res.skill);
      $('.preview').attr('src', res.file);
    }, 'json');

执行 git add . 和 git commit -m '修改英雄的时候，前端将获取的英雄数据渲染到页面中'