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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
如何通过JS实现日历简单算法
Oct 14 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写的小东西
2006/12/06 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
React中的render何时执行过程
2018/04/13 Javascript
vue实现循环切换动画
2018/10/17 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
部署Python的框架下的web app的详细教程
2015/04/30 Python
python的re正则表达式实例代码
2018/01/24 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python实现快递价格查询系统
2020/03/03 Python
利用Python优雅的登录校园网
2020/10/21 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
应届生体育教师自荐信
2013/10/03 职场文书
创先争优制度
2014/01/21 职场文书
数控专业自荐书范文
2014/03/16 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
行政主管岗位职责
2015/02/03 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL