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 '修改英雄的时候，前端将获取的英雄数据渲染到页面中'

版权声明：

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

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