iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >Node.js获取前端ajax提交的request信息
  • 351
分享到

Node.js获取前端ajax提交的request信息

信息jsNode 2022-06-04 17:06:01 351人浏览 八月长安
摘要

今天看一下node.js怎么获取ajax提交的request 信息 众所周知,ajax可以在不刷新整个页面的情况下实现局部刷新,这是相当好的一种方式,能够让我们动态更新信息,今天我们看一下怎么用node来接

今天看一下node.js怎么获取ajax提交的request 信息

众所周知,ajax可以在不刷新整个页面的情况下实现局部刷新,这是相当好的一种方式,能够让我们动态更新信息,今天我们看一下怎么用node来接收到前端ajax提交过来的信息

下面我贴一下前端的代码
index.html的代码我就不贴了, 因为里面就只有一个按钮而已,要实现的功能是点击按钮提交ajax异步请求

主要贴一下js页面的代码


$("button").on("click",function(){
  //提交ajax请求
  $.ajax({
    url:"Http://localhost:9999",
    data:{name:'xiaoming',age:19},
    type:"POST",
    dataType:"JSON",
    async:true,
    timeout:5000,
    complete:function(){
      console.log("end");
    },
    success:function(data,textStatus,jqXHR){
      console.log(data);
      console.log(textStatus);
      console.log(jqXHR);
    },
    error:function(textStatus,jqXHR){
      console.log("error");
      console.log(textStatus);
      console.log(jqXHR);
    }
  });
});

这样我们就已经异步提交了一个ajax请求给服务端。

由于我的服务端是用node写的,我贴一下node.js的代码




//载入模块
var http = require("http");
function onRequest(req,resp){
  //获取ajax提交的信息
  req.on("data",function(data){
    //打印
    console.log(decodeURIComponent(data));
  });
  //返回response
  resp.writeHead(200,{"ContentType":"text/html;charset=utf-8"});
  //返回响应尾
  resp.end();
}

//创建服务器
http.createServer(onRequest).listen(9999);

服务器获取的结果如下:


name=xiaoming&age=19

乍一看,其实获取ajax的请求信息是非常简单,我在node里创建了服务器,然后给request添加data事件,做了一个回调处理,然后就可以获取到ajax提交过来的数据了

但是这样的话,我们还是不能灵活的使用这个数据,我们必须用split将其name和age的value分割出来,这是相当不方便的。

于是我们想到了用querystring来解析为json对象,我们只需要稍稍修改一下刚刚的代码就可以实现




//载入模块
var http = require("http");
var qs = require("querystring");
function onRequest(req,resp){
  //获取ajax提交的信息
  var currentData = "";
  req.on("data",function(data){
    //打印
    currentData += data;
    console.log(qs.parse(currentData));
  });
  //返回response
  resp.writeHead(200,{"ContentType":"text/html;charset=utf-8"});
  //返回响应尾
  resp.end();
}

//创建服务器
http.createServer(onRequest).listen(9999);

下面是运行的结果


{ name: 'xiaoming', age: '19' }

我们也可以将它装到一个变量里,然后使用它的各种属性


var temp = qs.parse(data);
console.log(temp.name);
console.log(temp.age);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Node.js获取前端ajax提交的request信息

本文链接: https://www.lsjlt.com/news/12809.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 前端JavaScript获取电池信息
    目录前言Battery Status API的使用监听电池状态变化兼容性总结前言 随着技术的日益发展,web前端技术远比我们想象的强大。浏览器允许网站获取用户设备的电池状态信息,例如...
    99+
    2023-05-16
    前端获取电池信息的方法 前端获取数据 前端获取电池信息的方式
  • Git怎么获取当前提交用户信息和分支
    今天小编给大家分享一下Git怎么获取当前提交用户信息和分支的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。如何获取当前提交用户...
    99+
    2023-07-04
  • 聊聊前端怎么获取电池信息
    产品经理:加个需求,用户电脑设备如果快没电,我要暖心的告诉他该插上电源。前端攻城狮:。。。他电脑不会自己提醒吗?产品经理:你做不做?前端攻城狮:做!前言随着技术的日益发展,web前端技术远比我们想象的强大。浏览器允许网站获取用户设备的电池状...
    99+
    2023-05-14
    前端 JavaScript
  • node.js如何处理前端提交的GET请求
    这篇文章主要介绍了node.js如何处理前端提交的GET请求的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇node.js如何处理前端提交的GET请求文章都会有所收获,下面我们一起来看看吧。一、获取GET请求流程...
    99+
    2023-07-04
  • js前端获取用户位置及ip属地信息
    目录写在前面尝试一:navigator.geolocation尝试二:sohu 的接口尝试三:百度地图的接口写在后面 写在前面 想要像一些平台那样显示用户的位置信息,例如某省市那样。...
    99+
    2024-04-02
  • 怎么使用node.js处理前端提交的GET请求
    本篇内容介绍了“怎么使用node.js处理前端提交的GET请求”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、获取GET请求流程1、首先和...
    99+
    2023-06-17
  • Springboot如何获取前端反馈信息并存入数据库
    这篇文章给大家分享的是有关Springboot如何获取前端反馈信息并存入数据库的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。导入mybatis依赖<!--mybatis--><dependenc...
    99+
    2023-06-14
  • 使用node.js怎么处理前端提交的GET请求
    本篇文章给大家分享的是有关使用node.js怎么处理前端提交的GET请求,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一、获取GET请求流程1...
    99+
    2024-04-02
  • js前端怎么获取用户位置及ip属地信息
    今天小编给大家分享一下js前端怎么获取用户位置及ip属地信息的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。尝试一:navig...
    99+
    2023-07-02
  • uni-app获取当前环境信息的方法
    目录uni-app获取当前环境信息引用依赖的文件使用1、在public/index.html中引入JS-SDK2、使用Vuex,为其他页面使用时准备:store/index.js3、...
    99+
    2022-11-16
    uni-app环境信息 uni-app获取当前环境信息 uni-app当前环境
  • vue如何获取当前元素的文字信息
    这篇“vue如何获取当前元素的文字信息”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何获取当前元素的文字信息”文章吧...
    99+
    2023-07-04
  • Springboot获取前端反馈信息并存入数据库的实现代码
    导入mybatis依赖 <!--mybatis--> <dependency> <groupId>org.mybatis.spring.b...
    99+
    2024-04-02
  • 从 Golang 中的 /proc/meminfo 中提取内存和交换信息
    php小编草莓今天给大家介绍一个非常实用的方法,即从Golang中的/proc/meminfo中提取内存和交换信息。在Golang开发过程中,我们经常需要获取系统的内存和交换信息,以便...
    99+
    2024-02-12
    golang开发
  • 微信小程序如何同步获取当前storage的相关信息
    这篇文章主要为大家展示了微信小程序如何同步获取当前storage的相关信息,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序如何同步获取当前storage的相关信息”这篇文章吧。同步获取当前...
    99+
    2023-06-26
  • 微信小程序如何异步获取当前storage的相关信息
    这篇“微信小程序如何异步获取当前storage的相关信息”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“微信小程序如何异步获取当前storage的相关信息”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥...
    99+
    2023-06-26
  • Android 中CheckBox多项选择当前的position信息提交的示例代码
    先给大家展示下效果图:废话不多说了,下面通过示例代码给大家介绍checkbox 多项选择当前的position信息提交,具体代码如下所示:package com.dplustours.b2c.View.activity; import an...
    99+
    2023-05-31
    checkbox 多项选择 position
  • Flutter获取ListView当前正在显示的Widget信息(应用场景)
    目录一、概述二、应用场景1、获取最顶部的子部件信息2、视频列表自动播放3、模块定位三、使用1、基本使用2、手动触发3、子部件信息一、概述 Flutter 中的 ListView 相信...
    99+
    2024-04-02
  • bat脚本实现获取指定几个月前的月份信息
    这篇文章主要讲解了“bat脚本实现获取指定几个月前的月份信息”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“bat脚本实现获取指定几个月前的月份信息”吧!@echo offrem&n...
    99+
    2023-06-03
  • 微信公众号JS-SDK获取当前经纬度以及地址信息的方法
    目录前言一、微信 JS-SDK是什么?二、使用步骤1.绑定域名2.引入 JS 文件3.通过 config 接口注入权限验证配置4、在这过程中我遇到的问题及解决方法(提示错误inval...
    99+
    2024-04-02
  • 如何使用 kubernetes go-client 获取 kubectl 提供的相同 Pod 状态信息
    “纵有疾风来,人生不言弃”,这句话送给正在学习Golang的朋友们,也希望在阅读本文《如何使用 kubernetes go-client 获取 kubectl 提供的相同 Pod 状态信息》后,能够...
    99+
    2024-04-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作