Ajax获取node服务器数据的完整步骤


Posted in Javascript onSeptember 20, 2020

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>

总结

到此这篇关于Ajax获取node服务器数据的文章就介绍到这了,更多相关Ajax获取node服务器数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
javascript 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
Vue header组件开发详解
Jan 26 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 #Javascript
vue操作dom元素的3种方法示例
Sep 20 #Javascript
npm ci命令的基本使用方法
Sep 20 #Javascript
js面试题之异步问题的深入理解
Sep 20 #Javascript
js实现简单的点名器随机色实例代码
Sep 20 #Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 #Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 #Javascript
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP 函数学习简单小结
2010/07/08 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
JS实现复制功能
2017/03/01 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
JS实现的抛物线运动效果示例
2018/01/30 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
小学二年级学生评语
2014/04/21 职场文书
我爱读书演讲稿
2014/05/07 职场文书
节约用电标语
2014/06/17 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android
React自定义hook的方法
2022/06/25 Javascript