(编辑:jimmy 日期: 2024/12/25 浏览:2)
1.准备
因为是要将服务器获取的数据放在网页中 所以说对页面的渲染是必要的 这里我准备的是 art-template模板
2.服务器的准备
服务器要准备好渲染到页面的数据
3.页面的操作
这里我做的的是一个搜索框提示功能 讲解都在代码注释中
服务器代码如下
// 输入框文字提示 app.get("/searchAutoPrompt", (req, res) => { // 搜索关键字 const key = req.query.key; // 提示文字列表 const list = ["百度", "百度官网", "百度游戏", "百度网盘"]; // 搜索结果 filter是一个遍历的函数 includes(key)是凡是字符串含有key都返回 let result = list.filter((item) => item.includes(key)); // 将查询结果返回给客户端 res.send(result); });
页面代码:
下面的代码我用了一个封装好的Ajax函数
代码如下
function ajax (options) { // 默认值 var defaults = { type: 'get', url: '', async: true, data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function () {}, error: function () {} } // 使用用户传递的参数替换默认值参数 Object.assign(defaults, options); // 创建ajax对象 var xhr = new XMLHttpRequest(); // 参数拼接变量 var params = ''; // 循环参数 for (var attr in defaults.data) { // 参数拼接 params += attr + '=' + defaults.data[attr] + '&'; // 去掉参数中最后一个& params = params.substr(0, params.length-1) } // 如果请求方式为get if (defaults.type == 'get') { // 将参数拼接在url地址的后面 defaults.url += '"/js/ajax.js"></script> <script src="/UploadFiles/2021-04-02/template-web.js">总结