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 += '?' + params; } // 配置ajax申请 xhr.open(defaults.type, defaults.url, defaults.async); // 如果申请形式为post if (defaults.type == 'post') { // 设置申请头 xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']); // 如果想服务器端传递的参数类型为json if (defaults.header['Content-Type'] == 'application/json') { // 将json对象转换为json字符串 xhr.send(JSON.stringify(defaults.data)) }else { // 发送申请 xhr.send(params); } } else { xhr.send(); } // 申请加载实现 xhr.onload = function () { // 获取服务器端返回数据的类型 var contentType = xhr.getResponseHeader('content-type'); // 获取服务器端返回的响应数据 var responseText = xhr.responseText; // 如果服务器端返回的数据是json数据类型 if (contentType.includes('application/json')) { // 将json字符串转换为json对象 responseText = JSON.parse(responseText); } // 如果申请胜利 if (xhr.status == 200) { // 调用胜利回调函数, 并且将服务器端返回的后果传递给胜利回调函数 defaults.success(responseText, xhr); } else { // 调用失败回调函数并且将xhr对象传递给回调函数 defaults.error(responseText, xhr); } } // 当网络中断时 xhr.onerror = function () { // 调用失败回调函数并且将xhr对象传递给回调函数 defaults.error(xhr); }}<script src="/js/ajax.js"></script><script src="/js/template-web.js"></script><script type="text/html" id="tpl"> {{each result}} <li class="list-group-item">{{$value}}</li> {{/each}}</script><script> // 获取搜寻框 var searchInp = document.getElementById('search'); // 获取提醒文字的寄存容器 var listBox = document.getElementById('list-box'); //这里用定时器是为了优化 定时向服务器发送申请 优化了对服务器的压力 // 存储定时器的变量 var timer = null; // 当用户在文本框中输出的时候触发 searchInp.oninput = function () { // 革除上一次开启的定时器 clearTimeout(timer); // 获取用户输出的内容 var key = this.value; // 如果用户没有在搜寻框中输出内容 if (key.trim().length == 0) { // 将提醒下拉框暗藏掉 listBox.style.display = 'none'; // 阻止程序向下执行 return; } // 开启定时器 让申请提早发送 timer = setTimeout(function () { // 向服务器端发送申请 // 向服务器端索取和用户输出关键字相干的内容 ajax({ type: 'get', url: 'http://localhost:3000/searchAutoPrompt', data: { key: key }, success: function (result) { // 应用模板引擎拼接字符串 var html = template('tpl', {result: result}); // 将拼接好的字符串显示在页面中 listBox.innerHTML = html; // 显示ul容器 listBox.style.display = 'block'; } }) }, 800) }</script>