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 相关文章推荐
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php笔记之:AOP的应用
2013/04/24 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php读取本地json文件的实例
2018/03/07 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
Python之list对应元素求和的方法
2018/06/28 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
对公司合理化的建议书
2014/03/12 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers