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 相关文章推荐
jquery学习总结(超级详细)
Sep 04 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
搞定immutable.js详细说明
May 02 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
js正则相关知识点专题
2018/05/10 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
应届生会计求职信
2013/11/11 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
消夏晚会主持词
2015/06/30 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript